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

Question

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%;
}

在 Firefox

中查看它的 jsfiddle

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

我需要将 .article 设置为 height:100% 以使图像在 Firefox 中缩小

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

提前致谢！

Answer 1

它以the W3C specifications state 的方式理解它。要使max-height 起作用，除了内容本身之外，还需要明确设置其包含元素的height。这就是为什么当您设置 height: 100% 时它起作用的原因，因为现在您明确告诉 .article 从其父级（而不是其内容）获取其 height。但是，当您将.article 设置为max-height 时，它仍然是驱动其计算的height 的内容，只是限制不能超过.container height。在您的情况下，内容是 img 本身。

In this fiddle，你可以看到.article实际上是把自己限制在.container的height上，但是允许自己的内容（img）溢出到更大的高度。 img 不受其max-height 的约束，因为.article 没有显式 height 集，但实际上是从img 获得它的高度（只有它是有限的它不能越过其容器的height）。