图像使修复大小的div更大

Question

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

图像适合其div设置其高度和宽度为100％：

现在我想保持图像不被拉伸。 所以我将宽度设置为100％，将高度设置为auto 正如所描述的那样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 Script吗？

感谢您的帮助！

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;