% max-height на изображении, игнорируемое в 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%;
}

см. его jsfiddle в Firefox

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

Мне нужно было установить .article to height: 100% для сжатия изображения в Firefox

может кто-нибудь объяснить, как Firefox понимает процентную максимальную высоту и ее контейнеры?

заблаговременно!

Ответ 1

Он понимает это как состояние спецификации W3C. Для работы max-height что-то другое, кроме самого содержимого, должно быть явно задано height его содержащего элемента. Поэтому, когда вы устанавливаете height: 100%, это работает, потому что теперь вы явно говорите .article, чтобы взять его height из своего родителя (а не его содержимого). Но когда у вас есть .article с max-height, то он по-прежнему является содержимым, выбивающим его расчетное значение height, только с ограничением размера не прошедшего .container height. И в вашем случае это сам контент img.

В этой скрипте вы можете видеть, что .article фактически ограничивает себя height of .container, но позволяет содержимое (img) для переполнения на большую высоту. img не ограничен его max-height, потому что .article не имеет явного набора height, но фактически получает его высоту от img (только он ограничен, что он не может пройти мимо height его контейнера).