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
我需要将.article设置为高度：100％,以便在Firefox中缩小图像
谁能解释一下firefox如何理解百分比max-height及其容器？
提前致谢 ！
解决方法
它以
the W3C specifications state的方式理解它.为了使max-height工作,除了内容本身之外的东西需要明确地设置其包含元素的高度.这就是为什么当你设置高度时：100％它可以工作,因为现在你明确地告诉.article从它的父节点(而不是它的内容)获取它的高度.但是当你将.article设置为max-height时,它仍然是驱动其计算高度的内容,只是限制了不超过.container高度的大小.在你的情况下,内容是img本身.
In this fiddle,你可以看到.article实际上将自己限制在.container的高度,但允许自身的内容(img)溢出到更大的高度. img不受其max-height约束,因为.article没有明确的高度设置,但实际上是从img获得高度(只有它不能超过其容器的高度).
