Internet Explorer 7 中的 css 背景大小封面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5895571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background-size cover in internet explorer 7
提问by eav
I know that the IE7 does not support background-size cover.
我知道 IE7 不支持background-size cover.
I searched the web for some solutions, but the only thing i've got is that I should put a imgwith width: 100%and height:100%and put it as the background.
我搜索了一些解决方案的网络，但我所拥有的唯一的事情是，我应该把img与width: 100%和height:100%，并把它作为背景。
Is this the only solution? I've seen some solutions with -ms-filterbut it didn't work. Does anybody have another solution?
这是唯一的解决方案吗？我已经看到了一些解决方案，-ms-filter但没有奏效。有人有其他解决方案吗？
1 special thing:
I have more than 1 div wich has this background-sizecover property.
1 件特别的事情：我有超过 1 个具有此background-size封面属性的div 。
In firefox everything works (how surprising).
在 Firefox 中一切正常（多么令人惊讶）。
Edit1: My Code looks like this:
编辑 1：我的代码如下所示：
<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>
回答by SacredSkull
Using Modernizryou can discover what the user's browser is capable of.
使用Modernizr，您可以发现用户浏览器的功能。
Install Modernizr by linking it in your header
通过在标题中链接它来安装 Modernizr
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
And in your HTML tag,
在你的 HTML 标签中，
<html class="no-js">
Using CSS you can style your page as the browser supports it - Check the documentationfor what detection is supported. In this case, we want the background-sizeclass
使用 CSS，您可以设置浏览器支持的页面样式 -检查文档以了解支持的检测。在这种情况下，我们希望background-size类
In your CSS file - For browsers without background-size (AKA just IE)
在您的 CSS 文件中 - 对于没有背景大小的浏览器（也就是 IE）
.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}
and this for browsers that do:
这适用于执行以下操作的浏览器：
.background-size #image{
background-image: url(lol.png);
background-size: cover;
}
Using this method is more standards compliant, because in the future tags such as min-height: 100%could become unused.
使用这种方法更符合标准，因为在未来，诸如此类的标签min-height: 100%可能会变得不使用。
回答by pasx
Check this post for an answer:
查看此帖子以获取答案：
How do I make background-size work in IE?
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
Works perfectly in IE8
在 IE8 中完美运行
回答by Krimo
Give your image a class of streched (or whatever else) and in your css put this :
给你的图像一类拉伸（或其他任何东西），并在你的 css 中输入：
img.stretched {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Be sure to put your img tag right below the <body>tag.
确保将 img 标签放在标签正下方<body>。
回答by Aram Kocharyan
I've written a plugin for this:
我为此编写了一个插件：
https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin
https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin
<div style="width: 400px; height: 300px;">
<img class="background-size-cover" src="apple.jpg" />
</div>
<script>
$(document).ready(function() {
$('.background-size-cover').bgdSize('cover');
});
</script>
回答by MarkC80
This works for me with IE7
这适用于我的 IE7
http://kimili.com/journal/the-flexible-scalable-background-image-redux
http://kimili.com/journal/the-flexible-scalable-background-image-redux
You may need to install the IE9.js library from here (works with many versions of IE)
您可能需要从这里安装 IE9.js 库（适用于许多版本的 IE）
回答by frequent
Two ideas: 1. I'm currently trying to see if this filter helps:
两个想法： 1. 我目前正在尝试查看此过滤器是否有帮助：
- If background-size is not possible in IE, perhaps you would have to make your background-picture contain two images. The first image would have to be placed in a way, so it automatically displays correctly in IE without having to define background-size. For all other browsers you can use background-size and position to push the 2nd image into correct position. Trying this now...
- 如果背景尺寸在 IE 中是不可能的，也许你必须让你的背景图片包含两个图像。第一张图片必须以某种方式放置，因此它会自动在 IE 中正确显示，而无需定义背景大小。对于所有其他浏览器，您可以使用 background-size 和 position 将第二个图像推到正确的位置。现在试试这个...
