保持纵横比但始终填满整个宽度和高度的 CSS 背景封面(并为溢出创建滚动条)

Question

这是一个特别奇怪的要求，但客户不会让步。

我几乎已经得到了我目前需要的东西:

#main_content, .slide {position: relative; min-width: 1200px;}                                                                                                                                           
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }

问题是，如果我的浏览器窗口长于宽，我最终会在图像下方留下空白区域。如果有空间，客户想要的是图像填充所有可用高度并根据需要创建水平滚动条(而不是裁剪)。

我正在考虑的解决方案是检测浏览器窗口并通过 javascript 拉伸(stretch) .slide_layer img 以填充高度。但这感觉很蹩脚和草率。有没有更好的办法？

更糟糕的是，需要向后兼容 IE7。

谢谢!

Answer 1

这不一定能帮助您处理来自客户的水平溢出请求，但您可以重建幻灯片以使用背景图像，而不是其中的图像。

然后您可以使用 CSS3 background-size，设置为 'cover':

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

这意味着背景图像将拉伸(stretch) - 同时保持正确的尺寸 - 以填充父级。因此，除非您的幻灯片与图像的尺寸完全相同，否则您的顶部/底部或左侧/右侧会从 View 中切掉一点，但它始终会拉伸(stretch)以覆盖整个背景。

这是一个 CSS3 属性，因此如果没有一点帮助就无法恢复到 IE7。还好，CSS3 PIE可以帮助您获得对旧版 Internet Explorer 的所有支持。