css - 有没有办法在保持宽高比的情况下在 IE7 和 IE8 中使用背景大小？

Question

我想在我的网页上设置全屏背景图片。我为此使用 background-size=cover 。它给了我我想要的东西，但它在 lt-IE9 中不起作用，所以我正在使用 css 过滤器。

#container{
    position: absolute;
    height: 100%;
    width: 100%;

    background: url('img/dogs.jpg') no-repeat center center;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/dogs.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/dogs.jpg', sizingMethod='scale');
}

但它似乎只是拉伸(stretch)图像以使其适合背景并扭曲图像的纵横比。有人可以建议任何其他解决方案吗？非常感谢任何帮助。

Answer 1

对于 IE8:

假设您有一张 100px X 150px 的图片

尝试添加

#container:after {
    content: '';
    display: block;
    padding-top: 150%  /*height/width * 100% */;
}

FIDDLE

标记

<div>
    <img src="http://placehold.it/100x150" />
</div>

CSS

div {
    position: absolute;
    height: 100%;
    width: 100%;
}
div:after {
    content: '';
    display: block;
    padding-top: 150%;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width:100%;
}

注意:我尝试在 IE 上运行它 - 但 jsFiddle 在 iE <9 模式下不起作用。所以我不确定这个解决方案是否有效。