Internet Explorer 9 - proportional image resizing

Question

I am trying to limit the width of the image with CSS only:

#lateral-derecho #patrocinadores img { max-width: 130px; height: auto; margin: 0 auto; } 

And every browser does everything right, except for IE 9. It does not do it proportionally. I run it in <meta http-equiv="X-UA-Compatible" content="IE=8" /> .

By the way, IE 9 in standard mode does not even understand margin: 0 auto; , or am I doing something wrong? did they make a crappy browser again?

Edit: this is all CSS, the container (#patrocinadores) and img, img is contained inside #patrocinadores > a > img :

 #lateral-derecho #patrocinadores { float: right; width: 136px; margin-top: 25px; padding: 15px 0 5px; background: url(images/top-patrocinadores.png) top no-repeat #eee; text-align: center; } #lateral-derecho #patrocinadores a{display: block;} #lateral-derecho #patrocinadores img { max-width: 130px; height: auto; margin: 0 auto; } 

Answer 1

Try the following:

 #lateral-derecho #patrocinadores a { display: block; max-width: 130px; } #lateral-derecho #patrocinadores img { max-width: 100%; } 

If you want good quality scaling for IE <9, you want to enable AlphaImageLoader and set sizingMethod to scale .

Answer 2

Get rid of height: auto; . You do not need this, and this is the cause of the problems.