Img {max-height: 100%; } заставляет img превышать границы

Является ли это ошибкой Chrome?

Здесь HTML:

<div><img src="test.png"></div>

Здесь CSS:

* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }

Ожидаемый результат: img должен иметь высоту 65 пикселей.

Результат в Chrome (версия 27.0.1453.116) в Mac OS (версия 10.6.8): img имеет высоту 135 пикселей и "истекает кровью" в родительский отступ div, Если я изменил padding на div на 50px 0, странно он корректно отобразится.

Играйте с этим в кодеге: http://codepen.io/anon/pen/jhbKz

Скриншоты

Первый блок имеет padding of 50px 0. Второй блок имеет padding of 75px 0 60px.

Firefox (правильный результат)

Chrome (неправильно?)

Ответ 1

Попробуйте добавить контейнер к своему изображению с шириной и высотой 100%. Это даст вам тот же результат на хром и FF.

<div class="b">
    <div style='height:100%;width:100%;'>
        <img src="some image url">
    </div>
</div>

Я не могу объяснить, почему это исправление работает в настоящее время, но я сам пытаюсь рассуждать с ним.

Ответ 2

Спустя годы эта проблема, похоже, распространилась на Firefox. Обходной путь Pav не работал для меня, возможно, потому что у меня есть "a", а не "div". Единственным способом в моем случае было отображение в виде таблицы:

<div style="display: table;">
<a style="height: 100px; display: table-cell;" href="#">
    <img style="max-height: 100%; width: auto;" src="some image url">
</a></div>

Дополнительным преимуществом "таблицы" является то, что выровнять по вертикали: середина; может использоваться для центрирования изображения (или другого содержимого) по вертикали.