html - 填充背景图像而不是在屏幕调整大小时拉伸(stretch)

Question

我有一张适应屏幕高度且全宽的背景图片。问题是，当我调整宽度时，图像会拉伸(stretch)而不是填充。此外，应该位于其下方的内容会完全覆盖图像。

到目前为止，这是我的代码。

HTML:

<div id="bg">
    <img src="http://placehold.it/2560x1000" class="img" alt="" />
</div>
<div id="content">
    <!-- some content -->
</div>

CSS:

#bg {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1;

}

.img {
    background-position: center center;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: relative;
}

这里有一个 fiddle :http://jsfiddle.net/anm5sqft/

Answer 1

你使用了“background-position”和“background-size”但是你没有背景，因为你的图像不是背景，它是图像。

试试这个:

HTML

<div id="bg">
</div>

CSS

#bg {
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/2560x1000");
}

body{
    margin: 0;
}

Example with JSFiddle