调整 CSS 大小后图像移动

Posted 2023-03-06

【中文标题】调整 CSS 大小后图像移动

【英文标题】：Image moves after resize CSS

【发布时间】：2018-06-24 12:42:47

【问题描述】：

我现在的情况是这样的：

图片显然太大了，所以我在我的 CSS 中添加了以下代码：

max-width: 800px;

但是我的图像移动得太高了。正如您在下面的链接中看到的：

我的问题是如何使图像更小并将其直接保持在页脚上方？所以它正好适合我在第一张图片中显示的页脚。

这是我页面的一部分 html 代码：

<section class="section-main section-about">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2 class="page-header heading-primary-a">Over mij</h2>
                <p>In lacinia ipsum sit amet ultricies semper. Nulla facilisi. Proin et nulla consequat mauris gravida vestibulum. Donec non risus et velit auctor lobortis. Aliquam in placerat justo. Etiam nisi libero, suscipit vel nulla eget, blandit ultricies quam. Nunc pretium pharetra tellus sed suscipit. Fusce rhoncus metus est, quis facilisis eros luctus vestibulum. Morbi vestibulum, urna vitae feugiat tincidunt, urna magna pharetra enim, id congue lectus elit sit amet quam. Vivamus sit amet enim eros. Etiam nec molestie risus.</p>
                <p>Donec non est gravida, condimentum mauris sed, bibendum lectus. Duis poid.</p>
            </div>
            <div class="col-md-8">
                <img class="over-img" src="../../../images/zaky_upper.png" >

            </div>
        </div>
    </div>
</section>

这是 HTML 树的图像，共享 HTML 代码有点困难，因为它是一个 Angular 应用程序，我将导航栏、内容和页脚分开。这就是为什么我也通过图像共享 HTML 代码的原因：

下面是CSS代码的一部分：

.page-header 
  margin-top: 30px;


.heading-primary, .heading-primary-a 
  color: #FF5700;


.heading-primary-a 
  border-bottom: 2px solid #FF5700;


.section-main 
  padding-bottom: 0px;


.section-about 
  margin-top: 90px;


.over-img 
  /* currently commented out */
  /* max-width: 800px; */

如果您想查看完整的 CSS 代码，可以在下面的链接中找到它：

https://pastebin.com/ZUKyLsT1

提前致谢。

【问题讨论】：

你能发布你的css以便我们看看发生了什么吗？

@philr 当然我刚刚添加了 CSS 代码。

@philr 我还通过图像添加了更多 HTML。请阅读我上面的问题，为什么我通过图像显示 HTML 代码。

也许可以考虑保持img***.com/questions/12320761/…的纵横比

【参考方案1】：

您好，我会尝试将图像高度设置为 100%，宽度自动设置

.over-img 
 /* currently commented out */
 /* max-width: 800px; */
height:100%;
width:auto;

【讨论】：

我试过你的代码，但它仍然使图像太大，就像我展示的第一个屏幕截图一样。