根据给定的脚本
<style>
.x{
background: url('img.jpg') no-repeat;
background-size: contain;
height: 100%;
}
</style>
<div class="x"></div>
它适用于 chrome 和 firefox ...知道如何使其适用于 IE 7、8、9
我尝试了很多脚本，但没有一个能像 FF 和 chrome 那样运行良好。
【问题讨论】：
标签： javascript jquery internet-explorer css
9 之前的 IE 不支持 background-size：
http://www.css3.info/preview/background-size/
您必须想出一种不同的技术来处理这种情况。有关解决方法的说明，请参阅此： http://kimili.com/journal/the-flexible-scalable-background-image-redux
如果您想要一个示例（我不会声称这是一个很好的示例，但从技术上讲，它确实有效），您可以查看我去年为这个网站工作的代码。客户想要一个缩放到屏幕大小的背景图像，但在幻灯片旋转时也会发生变化，所以它有点吓人，代码方面：
你要注意http://www.buzzhoney.com/Content/style.css中的各种设置
这个网站也应该是响应式的，所以有几个级别的@media 查询可供查看。里面有很多内容，我没有时间重复所有内容，但这里有一些亮点：
基于这个标记外壳（我已经删除了所有会妨碍这些主要元素如何协同工作的额外内容）：
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
<!-- snip header stuff -->
</div>
<div id="main" role="main">
<!-- snip body stuff -->
</div>
<footer id="footer">
<!-- snip footer stuff -->
</footer>
<div id="background">
<div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
</div>
<!-- snip js includes, per best practices,
located at the bottom of the page -->
</div>
</body>
</html>
从第 316 行开始，我们为背景容器及其图像设置了初始样式，但仅适用于宽度在 320 像素到 480 像素之间的设备，适用于智能手机。然而，在 416 处，我们开始设置适用于 321px 宽及以上设备的样式：
#background
{
left: 0;
min-height: 730px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
height:100%;
}
#background img
{
left: 0;
min-width: 1200px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
display:block;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
注意容器（#background）如何设置为 100% 的宽度和高度，最小高度为 730 像素，内部的图像设置为 100% 宽度，但没有指定特定高度，只是一个最小高度宽度为 1200 像素。这基本上是说它会按比例放大，并且高度会与其宽度成比例地变化，但宽度永远不会低于 1200 像素，因此此时容器将围绕图像折叠并隐藏不适合的多余部分它的区域（溢出：隐藏）。
另请注意，我使用 position:fixed 和 left:0, top:0 将背景容器固定到位，并使用 z-index:-1 将其放置在其他所有内容的后面。
在更高分辨率下添加了一些其他功能进行了一些小的修改，但没有改变这个基本设置。出于您的目的，除非您想要褪色/变化的背景，否则您将删除这些线条：
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
因为它们会使背景图像不可见。
【讨论】：