在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设置为高度：100％，以便在Firefox中缩小图片

有人可以解释一下firefox如何理解百分比max-height及其容器？

提前感谢！

Answer 1

它以the W3C specifications state的方式理解它。要使max-height起作用，除内容本身之外的其他内容需要明确设置其包含元素的height。这就是为什么当你设置height: 100%它有效时，因为现在你明确告诉.article从其父级（而不是其内容）中取出height。但是当您.article设置为max-height时，它仍然是驱动其计算height的内容，只是因为没有调整.container {{1}之后的限制}。在您的情况下，内容是height本身。

In this fiddle，您可以看到img实际上将自己限制在.article的{​​{1}}，但允许自己的内容（{{1}溢出到更高的高度。 height不受.container的约束，因为img没有显式 img集，但实际上是从max-height获取其高度.article（仅限于它不能超过其容器的height）。