我的网页正文上有一张背景图片。我使用background-size:cover了这样的方法，使图像在保持图像纵横比的同时延伸到整个身体。我希望这对于 IE7 + IE8 是一样的。
我环顾四周，看到了以下代码：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale')";
但这并不能保留纵横比，这对我们所针对的网站来说真的很糟糕。
有没有办法做到这一点？没有碰到 jQuery？
不使用 jQuery 的原因是什么？您可以仅在条件注释中加载它IE<8，这样就不会加载其他所有现代浏览器 jQuery。
还要考虑到 IE7 的市场份额非常低（2.52%，2012 年 4 月），因此如果此功能对您的站点/应用程序非常重要，则可以为该特定浏览器加载约 25kb 的额外负载是可以接受的。
所以，我找到了这个 jQuery 插件：https ://github.com/louisremi/jquery.backgroundSize.js
一个 jQuery cssHook 添加对 IE6-7-8 的“cover”和“contain”的支持，在 1.5K
有关更多信息，请参阅Github 项目页面。
backgroundSize.js 实际上不会在 IE7 中拉伸 bg 图像，它似乎只是将其以原始大小居中。查看他们的演示并单击“检查 IE6-7-8 用户通常会看到什么”。
@danRhul
我已经读过 backstretch可以在 IE7+ 中使用
祝你好运！
您可以用实际图像伪造背景图像。它需要更多的 HTML 编辑，当然也不理想，但是从什么时候开始处理 IE 变得理想了？
<body>
<img id="mainBG" src="mainBG.jpg" />
<div id="content">
[ ... ]
然后相应地设置样式
body{
position:relative;
}
#mainBG{
width:100%
position:absolute;
top:0px;
left:0px;
}
如果我没记错的话应该是跨浏览器的。
我使用了以下（http://css-tricks.com/perfect-full-page-background-image/），它在ie7中运行良好。
HTML：
<body>
<img class="bg" src="filename">
</body>
CSS：
.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
我知道这现在是一个老问题，但我想我会像我一样，为在谷歌上找到这个问题的其他人分享我想出的解决方案。
我试图获取一张图片来覆盖网站的背景并遇到了这个问题，但是没有一个解决方案对我有用。我想出了这个：
HTML：将背景图片移动<img />到<body>.
<html>
<body>
<img class="background" src="kitty.jpg" />
<div class="content">
...
CSS : 使背景出现在内容下方，设置min-width/height为 100%。
html {
height: 100%
}
body .background {
position: absolute;
z-index: -1;
min-height: 100%;
min-width: 100%;
}
正是min-heightand min-widthhere 具有魔力。请勿在 HTML 或 CSS 中为图像指定宽度和高度，否则纵横比会发生变化。
以上将适用于IE7和IE8。如果你想支持IE6，你可以像这样设置一个居中的图像后备：
CSS：如果IE6，不显示图像，而是使用背景图像。
body {
_background: url("kitty.jpg") 50% top no-repeat;
}
body .background {
_display: none;
}
（注意，如果您不喜欢针对IE6的下划线 hack ，您可以使用条件语句来代替——这就是HTML5 Boilerplate所做的。）
经过多次试验和错误，最好的解决方案是猜测它！
以下对我有用。
body {
background-size:100%;
}
您有两种选择可以仅使用 CSS来实现此目的：
Object-fit: cover. 唯一的问题是它不适用于所有浏览器使用绝对值将图像放置在容器内 ，然后使用以下组合将其放置在中心：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意： 由于转换仅适用于 IE9，因此您可以使用过滤器。这是一个答案。
一旦它在中心，你可以做，
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使得图像得到了 Object-fit:cover 的效果。
不幸的是，此类问题的大多数解决方案要么依赖于 css3，要么忽略了保留图像原始纵横比的“覆盖”的本机功能。 https://github.com/louisremi/background-size-polyfill应该保持比例，但是当以某些方式拉伸浏览器时，我永远无法让它完全工作（操作员错误，我敢肯定:-)）。为了解决这个问题，我编写了一个 jquery 脚本，我已经在 safari、chrome、ff 和 ie8+ 上进行了测试。您会注意到您必须使用绝对定位的 img 而不是 css 背景图像。只需在 html 的标签中添加 bgImg 作为 id。
CSS：
.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;}
您的图像选择器必须绝对定位才能使其位于内容后面。这意味着您的父容器必须具有 position: relative 然后 overflow: hidden 以便从图像中溢出的任何内容（由于您要保持比例，因此不可避免地会隐藏其中的某些部分）。另请注意，父容器中的某些显示标签会破坏溢出的隐藏。
查询：
$(window).load(function () {
// only do this once and pass as function parameters, because chrome
// and safari have trouble not only with document.ready but window.resize
var img = new Image();
img.src = $("#bgImg").attr('src');
var $width_orig = img.width;
var $height_orig = img.height;
resizeBGImage($width_orig, $height_orig);
$(window).resize(function () {
resizeBGImage($width_orig, $height_orig);
});
});
function resizeBGImage($width_img_orig, $height_img_orig) {
// get dimensions of container
var $width_container = $('.container').outerWidth();
var $height_container = $('.container').outerHeight();
// calculate original aspect ratio and ratio of the container
var $imageratio = $width_img_orig / $height_img_orig;
var $containerratio = $width_container / $height_container;
var $wdiff = $width_container - $width_img_orig;
var $hdiff = $height_container - $height_img_orig;
// original size, so just set to original
if (($wdiff == 0) && ($hdiff == 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig);
}
// if container is smaller along both dimensions than the original image,
// set image to container size
else if (($wdiff < 0) && ($hdiff < 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math
}
// if container is wider than long relatiave to original image aspect ratio
// set width to container width and calculate height
else if ($containerratio > $imageratio) {
$("#bgImg").css('width', $width_container);
// calculate height using orig aspect ratio and assign to image height
$("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math
}
// else container is taller than long relatiave to original image aspect ratio
// set height to container height and calculate width
else {
// set the image height to container height
$("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math
// calculate width using orig aspect ratio and assign to image width
$("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig));
}
$("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px');
};
注意使用 $(window).load() 而不是 $(document).ready()。Chrome 和 safari 似乎对后者有问题，因为在这些浏览器中，当 DOM 加载时，背景图像可能没有完全加载。使用 $(window).load() 可确保所有窗口元素在脚本运行之前就位。
听起来你需要像 Modernizer 这样的“垫片”或“polyfill”：http: //modernizr.com/docs/#html5inie