CSS Div背景图像固定高度100%宽度

Question

我试图设置一系列div的背景图像，每个都有自己固定的高度，并拉伸以填充宽度，即使顶部/底部有溢出被剪辑。我只是不想边缘有空白。

目前，我有：http://jsfiddle.net/ndKWN/

CSS

    #main-container {
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align: center;
    }

    .chapter{
        position: relative;
        height: 1400px;
        z-index: 1;
    }

    #chapter1{
    background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

    #chapter2{
    background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

Answer 1

但问题是，这个问题。章节类不是动态的你在声明高度：1200px

所以最好使用“背景：封面”和“设置媒体查询”来设置流行分辨率的特定高度。

Answer 2

http://jsfiddle.net/ndKWN/1/

可以使用background-size： cover；

Answer 3

请看我对类似问题的回答。

听起来你想要一个背景图像来保持它自己的宽高比，同时扩展到100%的宽度，并在顶部和底部被裁掉。如果是这样的话，做这样的事情：

.chapter {
    position: relative;
    height: 1200px;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle：http://jsfiddle.net/ndKWN/3/

这种方法的问题是容器元素的高度是固定的，因此如果屏幕足够小的话，下面可能会有空间。

如果你想让高度保持图像的宽高比，你必须像我在上面链接的答案的编辑中写的那样做。将容器的高度设置为0，并将填充底部设置为宽度的百分比：

.chapter {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle：http://jsfiddle.net/ndKWN/4/

如果每个图像具有不同的纵横比，您还可以将填充底部百分比放入每个#chapter样式中。为了使用不同的纵横比，将原始图像的高度除以其自身的宽度，然后乘以100得到百分比值。