如何使IE 8中的背景图像按比例扩大？

Question

I have a div with a background image, within a wrapping as such:

<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'); 
}

The filter IE method works somewhat - it stretches the image length wise but not proportionally height wise, like background-size:cover does.

Does anyone know a way to stretch the background image proportionally in IE (so the vertical overflow is hidden by #imageholder)?

Answer 1

Possibly, no method to scale the image in proportion except increase size of the image holder. Here you can set height of imageHolder to percent proportionate to the image referred in the filter.

Answer 2

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

Answer 3

I made a way to do this in JQuery. Its not the proper way and I dont like it but it may help someone:

$(window).resize(function() {

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

var windowsize = windowwidth - 500;

var windowsize = windowsize + "px";

if(windowwidth > 1100){

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

};

});