Question

我有一个容器，其最大高度以像素为单位定义，然后是一个IMG，其中max-height以百分比定义。在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，

是根据高度来计算的包含块。如果包含块的高度不是明确指定，该值计算为auto。百分比高度根元素（例如）相对于视口。

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

Answer 2

试试这个。

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

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

2 个答案: