Question

我有一个背景图像的div，在这样的包装内：

<div id="imageholder">
  <div id="image">
  </div>
</div>

#imageholder {
width: 100%;
height: 500px;
overflow: hidden;
}

#image {
width: 100%;
height: 100%;
background-image: url(image.jpg);
background-size: cover;
/*IE HACK*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale'); 
}

过滤器IE方法有点作用 - 它可以纵向拉伸图像长度但不按比例拉伸高度，如背景尺寸：封面。

有没有人知道在IE中按比例拉伸背景图像的方法（因此#imageholder会隐藏垂直溢出）？

Answer 1

可能的是，除了增加图像保持器的尺寸之外，没有按比例缩放图像的方法。在这里，您可以将imageHolder的高度设置为与过滤器中引用的图像成比例的百分比。

Answer 2

尝试将图像高度设置为自动或百分比。

Answer 3

我在JQuery中做了一个方法。它不是正确的方式，我不喜欢它，但它可能会帮助某人：

$(window).resize(function() {

var windowwidth = $(window).width();

var windowsize = windowwidth - 500;

var windowsize = windowsize + "px";

if(windowwidth > 1100){

      $('#image').css({ height: windowsize });

};

});

如何在IE 8中按比例扩展背景图像？

3 个答案: