CSS Div背景图片固定高度100％宽度 [英] CSS Div Background Image Fixed Height 100% Width

问题描述

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

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.

目前，我有： 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;
    }

推荐答案

问题此处。

这听起来像是想要一个背景 - 图像保持自己的宽高比，同时扩展到100％的宽度，并在顶部和底部裁剪。如果是这样，请这样做：

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:

.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.

如果你希望高度保持图像的宽高比，你必须做一些事情像我在编辑中写到我上面链接的答案。将容器的 height 设置为0，并将 padding-bottom 设置为宽度的百分比：

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:

.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/

您也可以将 padding-bottom 样式，如果每个图像具有不同的宽高比，则每个要使用不同的宽高比，请使用原始图片的自身宽度除以原始图片的高度，再乘以100即可得到百分比值。

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.

这篇关于CSS Div背景图片固定高度100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！