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

I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.

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

Currently, I have: http://jsfiddle.net/ndKWN/

目前,我有: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;
    }

3 个解决方案

#1

See my answer to a similar question here.

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

It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:

听起来你想要一个背景图像来保持它自己的长宽比，同时扩展到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/

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

The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.

这种方法的问题是容器元素的高度是固定的，所以如果屏幕足够小的话，可以在下面留出空间。

If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:

如果你想要保持图像的高宽比，你需要做一些像我在上面链接的答案的编辑中写的那样的事情。将容器高度设为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/

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

You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.

如果每个图像都有不同的纵横比，你也可以将划水的百分比放入每个#章节的样式中。为了使用不同的纵横比，将原始图像的高度除以它自己的宽度，再乘以100得到百分比值。

#2

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

You can use background-size: cover;

你可以使用背景尺寸:封面;

#3

But the thing is that the .chapter class is not dynamic you're declaring a height:1200px

但问题是。chapter类不是动态的你声明的高度是1200px

so it's better to use background:cover and set with media queries specific height's for popular resolutions.

因此，最好使用背景:封面和设置与媒体查询特定高度的流行分辨率。

#1