Question

我有一个适应屏幕高度的背景图像，并且是全宽的。问题是，当我调整宽度时，图像会伸展而不是填充。此外，应该在其下方的内容完全覆盖图像。

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

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;
}

这是一个小提琴：http://jsfiddle.net/anm5sqft/

Answer 1

你使用＆＃34;背景位置＆＃34;和＆＃34;背景大小＆＃34;但你没有背景，因为你的图像不是背景，而是图像。

试试这个：

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

Answer 2

.bg-section {
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    height:100vh;
}
<div class="bg-section" style="background-image:url(http://placehold.it/2560x1000)"></div>

http://jsfiddle.net/1wurw0zu/

填充背景图像而不是拉伸屏幕调整大小

2 个答案: