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

对于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＆lt; 9模式下不起作用。所以我不确定这个解决方案是否有效。

Answer 2

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

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

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

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

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

享受这个简单的解决方案。的：）

Answer 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>

有没有办法在IE7和IE8中保持纵横比的背景大小？

3 个答案:

标记

CSS