Max-height attribute makes image unproportional wide in chrome?

Question

I have set an image with the css set to a max-height of 220px and a height of 100%.

That should set (this) image width to 175px and height to 220px. Which works fluently in Firefox and Internet explorer but in Chrome (desktop, tablet & smartphone) it sets the height to 220px but the width(!) to 220px as well. Why is this, is this some kind of bug in Chrome or am I just missing something here.

Weird part is, that if you'll remove the height:100% part so you are only left with the max-height:220px, this problem does not occur.

See a more detailed example below

figure {
    width: 100%;
    max-height: 220px;
}

a {
    width: 100%;
    display: inline-block;
    text-align: center;
}

img {
    height: 100%;
    max-height:220px;
}

http://jsfiddle.net/be5jT/ JS Fiddle Example

Answer 1

What's Going On:

If you use the inspector tool, the browsers are adding width:auto;, because no width rules are declared. I've researched a bit and I can't find any reason as to WHY, but it comes down the fact that Chrome and Firefox calculated "width:auto" differently. Firefox is calculating based on proportional, and Chrome is displaying native.

I've checked the CSS2.1 Width spec, and since we are talking about an image which is inline, we have a large number of conditions to check for. The one that I think applies here is:

Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

If I'm reading it right, that means that Chrome is technically correct, even though Firefox's method ends up looking better.

Alternative Fix Method:

lili2311's answer will work, but then you'd have to declare the width, which means that you'd have to use images which are the same proportions. You could also remove the height:``00%, which you already know. A third method would be to give the a a height:100%, change the max-height:220px to height:220px on the figure, and then remove the max-height from the img. This lets you only declare 220px once.

Code:

figure {
    width: 100%;
    height: 220px;
}
a {
    width: 100%;
    height:100%;
    display: inline-block;
    text-align: center;
}
img {
    height: 100%;
    width:auto;
}

Working Demo:

Answer 2

You no need to add height, set max-height only

DEMO

img {
    max-height:220px;
}