填充背景圖片，而不是在屏幕調整大小時拉伸

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

您使用“背景位置”和“背景尺寸”，但是您沒有背景，因為您的圖像不是背景，而是圖像。

嘗試這個 ：

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

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/