Firefox 中忽略的图像最大高度百分比

HTML:

<div class="container">
    <article class="article">
        <img class="article-img" src="bordeaux.jpg" />
    </article>
</div>

CSS:

.container{
    width:500px;
    height:200px;
}
.article{
    max-height:100%;
}
.article-img{
    max-height:100%;
}

看到它的jsfiddleFirefox

http://jsfiddle.net/UETMr/4/ http://jsfiddle.net/UETMr/4/

我需要设置.物品高度：100%在 Firefox 中缩小图像

有人可以解释 Firefox 如何理解百分比最大高度及其容器吗？

提前致谢 ！

它是这么理解的W3C 规范规定 http://www.w3.org/TR/CSS2/visudet.html#propdef-max-height. For max-height为了工作，除了内容本身之外还需要明确设置height其包含元素。这就是为什么当你设置height: 100%它有效，因为现在你明确告诉.article采取其height来自其父级（而不是其内容）。但是当你有.article设置为max-height，那么它仍然是内容驱动其计算height，只是限制大小不超过.container height。就你而言，内容是img itself.

在这个小提琴中 http://jsfiddle.net/UETMr/8/，你可以看到.article实际上是把自己限制在height of .container，但允许其自身的内容（img）溢出到更大的高度。这img不受其限制max-height因为.article没有explicit height设置，但实际上是从img（只是有限制，不能越过height其容器）。