2

This is a particularly strange request, but the client won't budge.

I've almost got what I need currently with:

#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%; }

Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).

The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?

To make matters worse, backward compatibility is required back to IE7.

Thanks!

4

1 回答 1

1

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

然后，您可以使用 CSS3 背景大小，设置为“覆盖”：

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

这意味着背景图像将伸展 - 同时保持正确的尺寸 - 以填充父级。因此，除非您的幻灯片与图像的尺寸完全相同，否则您的顶部/底部会稍微偏离，或者左/右会从视图中截断，但它总是会拉伸以覆盖整个背景。

这是一个 CSS3 属性，所以在没有一点帮助的情况下不会回到 IE7。幸运的是，CSS3 PIE可以帮助您从旧版本的 Internet Explorer 中获得支持。

于 2013-05-23T16:20:14.503 回答