css - 容器内的最大高度 <img> 具有最大高度，行为不一致

Question

我有一个以像素为单位定义最大高度的容器，然后是一个以百分比为单位定义最大高度的 IMG。在 Chrome 中，这按预期工作，在其他浏览器中，img 只是扩展到容器之外。

有人知道哪种行为是正确的，为什么？

<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/

Answer 1

根据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.

因此，由于您仅声明了 max-height 和 min-height，而不是 height，因此 img 高度默认为auto。