Does max-height attribute make image disproportionate in chrome?

Question

I set the image with css set to a maximum height of 220px and a height of 100%.

This should set (this) the width of the image to 175 pixels and the height to 220 pixels. This works well in Firefox and Internet Explorer, but in Chrome (desktop, tablet and smartphone) it sets the height to 220 pixels and the width (!) To 220 pixels. Why is this, is this some kind of bug in Chrome, or I just missed something here. .

The strange part is that if you delete the height: 100% part, so that you only stay with 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/ Sample JS script

Answer 1

What's happening:

If you use the inspector tool, browsers add width:auto; because no width rules are declared. I did a little research and I can’t find any reason for WHY, but this is because Chrome and Firefox have calculated “width: auto” differently. Firefox computes based on proportionality, and Chrome displays native.

I checked the CSS2.1 width specification, and since we are talking about an image that is inline, we have a lot of conditions to check. One that I think is applicable here:

Otherwise, if the "width" has the calculated value "auto", and the element has an internal width, then this internal width is the used value "Width".

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

If I read it correctly, it means that Chrome is technically correct, although the Firefox method looks better.

Alternative fix method:

lili2311's answer will work, but then you have to declare the width, which means that you have to use images with the same proportions. You can also remove height:``00% , which you already know. The third method would be to give a a height:100% , change max-height:220px to height:220px to figure , and then remove max-height from img . This allows you to declare 220px only 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 do not need to add height , set max-height only

Demo

 img { max-height:220px; } 

Answer 3

Setting max-width also fixes the issue for me in Chrome:

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

Demo: http://jsfiddle.net/be5jT/2/