在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

它以W3C规范的方式理解它.为了max-height工作,除了内容本身之外的东西需要明确地设置height其包含元素.这就是为什么当你设置height: 100%它有效时,因为现在你明确地告诉.article它height从它的父(而不是它的内容)中获取它.但是当你.article设置时max-height,它仍然是驱动其计算的内容height,只是因为没有调整过去的限制.container height.在你的情况下,内容就是它img自己.

在这个小提琴,你可以看到,.article实际上是在限制本身对height的.container,但允许本身(内容img)溢出到更高的高度.在img不受其约束max-height,因为.article没有一个明确的 height设定,但实际上是获取其高度从img(仅是有限的,它不能走过去的height它的容器).