最大高度<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，

的計算相對於所述 包含塊的高度。如果包含塊的高度不是明確指定的 ，則該值計算爲自動。根元素（例如）上的百分比高度 相對於視口。

結果，因爲你只有max-height並宣佈min-height和NOT height，該img高度默認爲auto。

Answer 2

試試這個。

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