css - Is there a way to work background-size in IE7 and IE8 with maintaining aspect ratio? -
i want set full screen background image on webpage. i'm using background-size=cover that. gives me want doesn't work in lt-ie9 using css filters.
#container{ position: absolute; height: 100%; width: 100%; background: url('img/dogs.jpg') no-repeat center center; background-size: cover; filter: progid:dximagetransform.microsoft.alphaimageloader(src='img/dogs.jpg', sizingmethod='scale'); -ms-filter: progid:dximagetransform.microsoft.alphaimageloader(src='img/dogs.jpg', sizingmethod='scale'); }
but seems stretch image in order fit background , distorts aspect ratio of image. can please suggest other solution? appreciated.
for ie8:
say have image 100px x 150px
try adding
#container:after { content: ''; display: block; padding-top: 150% /*height/width * 100% */; }
markup
<div> <img src="http://placehold.it/100x150" /> </div>
css
div { position: absolute; height: 100%; width: 100%; } div:after { content: ''; display: block; padding-top: 150%; } img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:100%; }
nb: tried runnning on ie - jsfiddle doesn't work in ie <9 mode. i'm not sure if solution works.
Comments
Post a Comment