图片使修复尺寸 div 变大

Question

我正在尝试将图片放入我的网站。图片位于 div 中，大小固定。问题是图像拉伸了整个 div 当我在 CSS 中使用自动高度时。

图像适合其 div 并将其高度和宽度设置为 100%：

现在我想让图像保持未拉伸状态。所以我将宽度设置为 100%，将高度设置为自动正如所描述的那样 here 设置图像在下面部分下的图层中后但在页面的下一部分上分层。

这是我使用的 HTML 代码：

<div class="section4">
        <section class="half">
            <div class="officePicContainer">
                <img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
            </div>
        </section>

        <section class="half">


        </section>  
    </div>

和 CSS 代码：

 .half {
    height: 50%;
    position: relative;
}

.half:first-child {


}
.half:last-child {
    background: #950049;

}
     .officePic {
        height: auto;
        width: 100%;
    }

如何在不拉伸图像的情况下调整图像大小并使其适合其父级 div？在 CSS 中还有可能吗？或者是否需要 Java 脚本？

感谢您的帮助！

Answer 1

创建 div 和 background-size:cover css 标签并设置 position: fixed

<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>

Answer 2

<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>

图片使修复尺寸 div 变大

Image makes fix sized div larger

html

css

resize

image