Internet Explorer 9 - 按比例调整图像大小

Question

I'm trying to limit image width with CSS only:

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

And every browser is doing it all right except IE 9. It's not doing it proportionally. I'm running it in <meta http-equiv="X-UA-Compatible" content="IE=8" /> .

BTW, IE 9 in standards mode does not even understand margin: 0 auto; or I'm doing something wrong? they did a crappy browser again?

Edit: this is all the CSS, 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 this:

#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'll want to include the AlphaImageLoader and set sizingMethod to scale .

Answer 2

Get rid of the height: auto; . You don't need it, and it's the cause of the problems.