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

【问题标题】：Is there a way to work background-size in IE7 and IE8 with maintaining aspect ratio?有没有办法在保持宽高比的情况下在 IE7 和 IE8 中使用背景大小？
【发布时间】：2013-10-07 06:52:33
【问题描述】：

我想在我的网页上设置全屏背景图片。我为此使用了 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');
}

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

【问题讨论】：

afaik 这只能使用 javascript 归档，解决方案是否必须是 css？
是的，我只需要 css 解决方案。感谢您的回复。

标签： css internet-explorer background-image aspect-ratio

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

您还可以尝试向后拉伸 (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>

【讨论】：