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');
}

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

Answer 1

您还可以尝试回弹（http://srobbin.com/jquery-plugins/backstretch/），结果与幻灯片相同background-size:cover，也允许幻灯片放映。您可以在正文或内容上使用它。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $(".#container").backstretch("path/to/image.jpg");
</script>

或称它在身体上

<script>
    $.backstretch("path/to/image.jpg");
</script>

Answer 2

For IE8:

Say you have an image 100px X 150px

Try adding

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

FIDDLE

Markup

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

NB: I tried runnning this on IE - but jsFiddle doesn't work in iE <9 mode. So I'm not sure if this solution works.

Answer 3

一种使用 htc 文件的 CSS 解决方案：

下载backgroundsize.min.htc并将其放入您的项目中。

现在只需在您的 css 中添加这些行：

{
    //your other properties
    background-size: cover;
    -ms-behavior: url(backgroundsize.min.htc);
}

注意：url根据您的项目设置使用。

享受这个简单的解决方案。:)