CODEWITHSUNDEEP
css
Dygerati
Dygerati

Reputation: 666

Max-height <img> within container with max-height, inconsistent behavior

I have a container with a max-height defined in pixels, and then an IMG within with a max-height defined in percentage. In Chrome this works as expected, in other browsers the img simply extends beyond the container.

Anyone know which is the proper behavior, and why?

<figure>

    <img src="http://images.autostash.com/parts/img/medium/wix/24056.jpg" alt="no picture">     

</figure>

figure {
    max-width: 90px;
    max-height: 90px;
    border: 1px solid red;
}

img {
    max-height: 90%;
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/Dygerati/wWRJK/

Upvotes: 2

Views: 101

Answers (2)

painotpi
painotpi

Reputation: 6996

According to the MDN description of the CSS height property,

The is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the value computes to auto. A percentage height on the root element (e.g. ) is relative to the viewport.

As a result, since you have only max-height and min-height declared, and NOT height, the img height defaults to auto.

Upvotes: 3

sajay
sajay

Reputation: 315

Try this.

figure {
    max-width: 90px;
    height: 90px;
    border: 1px solid red;
}

Upvotes: 0

Related Questions