html背景图片div设置宽自动,html – CSS Div背景图片固定高度100％宽度

看到我的答案类似的问题

here。

这听起来像是要让背景图像保持自己的长宽比，同时扩展到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;

}

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

如果您希望高度保持图像的宽高比，则必须执行与我在上面链接的答案的编辑中所写的内容。将容器的高度设置为0，并将padding-bottom设置为宽度的百分比：

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

}

如果每个图像具有不同的宽高比，您也可以将padding-bottom百分比放入每个#chapter样式。为了使用不同的长宽比，将原始图像的高度除以自己的宽度，并乘以100以获得百分比值。