我的网页正文上有背景图片。我使用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？
答案 0 :(得分：12)
不使用jQuery的原因是什么？您可以仅在IE<8的条件注释中加载它，以便对于其他每个现代浏览器都不加载jQuery。
另外考虑IE7有一个very low market share (2,52%, April 2012)因此，如果此功能对您的站点/应用程序非常重要，则可以为该特定浏览器加载~25kb的额外费用。
所以，我找到了jQuery的这个插件：https://github.com/louisremi/jquery.backgroundSize.js
jQuery cssHook在IE5-7-8中添加对“cover”和“contains”的支持，1.5K
有关详细信息，请参阅Github project page。
答案 1 :(得分：3)
backgroundSize.js实际上不会在IE7中拉伸bg图像，它似乎只是以原始大小为中心。查看他们的demo并点击＆＃39;检查IE6-7-8用户通常会看到的内容。＆＃39;
@danRhul
我已经读过backstretch可以在IE7 +
中使用 祝你好运！答案 2 :(得分：3)
你可以用实际图像伪造背景图像。这是一个更多的HTML编辑，当然不理想，但从什么时候开始处理IE是理想的？
<body>
<img id="mainBG" src="mainBG.jpg" />
<div id="content">
[ ... ]
然后相应地设置样式
body{
position:relative;
}
#mainBG{
width:100%
position:absolute;
top:0px;
left:0px;
}
如果我没弄错的话应该是跨浏览器。
答案 3 :(得分：2)
我使用了以下内容（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% */
}
}
答案 4 :(得分：1)
我知道现在这是一个老问题，但我想我会为其他在谷歌上发现这个问题的人提出一个解决方案，就像我一样。
我试图让图像覆盖网站的背景并遇到了这个问题，但是没有一个解决方案适合我。我想出了这个：
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-height和min-width能够带来魔力。不要在HTML或CSS中为图像指定宽度和高度，否则纵横比会发生变化。
以上内容适用于 IE7 和 IE8 。如果您想支持 IE6 ，可以像这样设置居中的图片回退：
CSS ：如果 IE6 ，请不要显示图片，而是使用背景图片。
body {
_background: url("kitty.jpg") 50% top no-repeat;
}
body .background {
_display: none;
}
（N.B。如果你不喜欢下划线黑客攻击 IE6 ，你可以改用conditionals - 这就是HTML5 Boilerplate所做的。）
答案 5 :(得分：0)
不幸的是，这种问题的大多数解决方案要么依赖于css3，要么忽略保留图像原始宽高比的“封面”的原生功能。 https://github.com/louisremi/background-size-polyfill应该保留比率，但是当我以某种方式拉伸浏览器时，我永远无法完全工作（操作员错误，我确定:-)）。为了解决这个问题，我写了一个jquery脚本，我在safari，chrome，ff和ie8 +上测试过。你会发现你必须使用一个绝对定位的img而不是css background-image。只需在html中的标记中添加bgImg作为id。
CSS：
.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;}
您的图像选择器必须绝对定位，以使其位于内容后面。这意味着你的父容器必须有位置：relative然后溢出：隐藏，以便从图像中溢出任何溢出（因为你保持比例，它的一些部分是不可避免的）将被隐藏。还要注意，父容器中的某些显示标签会破坏溢出的隐藏。
JQUERY：
$(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（）可确保在脚本运行之前所有窗口元素都已就位。
答案 6 :(得分：0)
经过多次试验和错误，最好的解决方案是猜测它！
以下对我有用。
body {
background-size:100%;
}
答案 7 :(得分：0)
您可以通过以下两种方法来实现此目标：仅CSS ：
Object-fit: cover。唯一的问题是，它不能在所有浏览器中使用使用绝对将图像放置在容器内，然后使用以下组合将其放置在中央：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意： 由于 ONLY 仅适用于IE9，因此您可以使用过滤器。 Here就是答案。
一旦它在中心，就可以做
// 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的效果。
答案 8 :(得分：-1)
听起来你需要像Modernizer这样的'垫片'或'polyfill'： http://modernizr.com/docs/#html5inie