CODEWITHSUNDEEP
htmlcssgoogle-chrome
user007
user007

Reputation: 1673

Max-height attribute makes image unproportional wide in chrome?

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 Detailed example

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

Upvotes: 7

Views: 2478

Answers (3)

Kelderic
Kelderic

Reputation: 6687

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.

enter image description here

enter image description here

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: jsFiddle

Upvotes: 5

amol
amol

Reputation: 1555

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

DEMO

img {
    max-height:220px;
}

Upvotes: 1

lili2311
lili2311

Reputation: 76

Setting max-width as well fixed the issue for me in Chrome:

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

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

Upvotes: 0

Related Questions