我试图用一个背景图像设置一系列div，每个div都有自己的固定高度，并拉伸以填充宽度，即使裁剪的顶部/底部有溢出。我只是不想在边缘留下空白
目前，我有：http://jsfiddle.net/ndKWN/
CSS
主容器{
浮动：左；
宽度：100%；
保证金：0；
填充：0；
文本对齐：居中；
}
.章{
位置：相对位置；
高度：1400px；
z指数：1；
}
#第一章{
背景：url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg)50%0不重复固定；
高度：1200px；
}
#第二章{
背景：url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson–94781_1680x1050.jpg)50%0不重复固定；
高度：1200px；
}
请看我对类似问题的回答
这听起来像是你想要一个背景图像保持它自己的纵横比，同时扩展到100%的宽度，并在顶部和底部进行裁剪。如果是这种情况，请执行以下操作：
。章节{
位置：相对位置；
高度：1200px；
z指数：1；
}
#第一章{
背景图片：url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
背景重复：无重复；
背景尺寸：100%自动；
背景位置：中上；
背景附件：固定；
}
jsfiddle：http://jsfiddle.net/ndKWN/3/
这种方法的问题是容器元素的高度是固定的，因此如果屏幕足够小的话，下面可能会有空间
如果你想让高度保持图像的纵横比，你必须像我在编辑上面链接的答案时写的那样。将容器的高度设置为0，并将填充底部设置为宽度的百分比：
。章节{
位置：相对位置；
身高：0；
垫底：75%；
z指数：1；
}
#第一章{
背景图片：url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
背景重复：无重复；
背景尺寸：100%自动；
背景位置：中上；
背景附件：固定；
}
jsfiddle：http://jsfiddle.net/ndKWN/4/
如果每个图像具有不同的纵横比，您还可以将填充底部百分比放入每个#chapter样式中。为了使用不同的纵横比，将原始图像的高度除以其自身的宽度，然后乘以100得到百分比值