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% */; } 

fiddle

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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -