Img max-height не соответствует родительским размерам

У меня есть элемент img внутри жидкости div. Это значение img имеет значение max-height, равное 100%. Итак, если изображение выше, чем div, оно должно отображаться как высокое, чем div.

Исходный размер файла .png - 200x200. В моем браузере div показывает как 284x123. Поэтому img должен отображаться на 123x123, чтобы сохранить его соотношение сторон.

Тем не менее, img разбивает границы div и по-прежнему показывает как 200x200. Я не могу понять, почему это происходит.

Это происходит в Chrome, но не в Firefox (последний раз я пробовал).

Вы можете увидеть текущее состояние здесь (http://paginas.fe.up.pt/~ei07171/test/). Если вы наведите указатель мыши на левую сторону изображения, вы увидите серо-стрелку .png, о которой я говорю. Стрелка с правой стороны является SVG файлом и работает правильно.

Изменить: Я создал отдельный jsfiddle (http://jsfiddle.net/dcastro/3Ygwp/1/), где img max-height кажется, работает правильно.. Я не могу найти, что в моем проекте заставляет его не работать.

Ответы

Ответ 1

Я понял это. Для того, чтобы элемент max-height работал, один из его родителей должен иметь атрибут height, определенный (видимо, в фиксированной единице, например px, а не в процентах).

Из w3c specs:

Процент рассчитывается по отношению к высоте сгенерированный блок, содержащий блок. Если высота содержащего блок явно не указан (т.е. зависит от содержимого высота), и этот элемент не является абсолютно позиционированным, процент значение считается "0" (для "min-height" ) или "none" (для 'Макс-высота').

Поскольку ни один из моих родительских объектов img не имеет фиксированной высоты, я должен был ограничить мой img до максимальной ширины.

Изменить. Кроме того, кажется, что webkit слишком сильно использует спецификации: fooobar.com/questions/485577/...

Я использовал обходной путь, представленный в этом потоке, и использовал position: absolute; max-height: 100%; top: 0.

Ответ 2

Я тоже столкнулся с этим, и мне удалось получить согласованную высоту в разных браузерах с использованием единиц vh в CSS, например max-height: 5vh;, как в 5% от высоты просмотра.

Ответ 3

Попробуйте добавить атрибуты width и height к вашему img

Также установите естественные размеры в вашем HTML, чтобы помочь визуализации браузера.

HTML

<img src="img/mywine/2high.png" width="123px" height="123px">

CSS

  img{
       max-width: 100%
       height: auto;
    }

Ответ 4

Я действительно не тестировал это, но, возможно, вы могли бы попробовать это (заменив ваши селекторы по мере необходимости)

#theDiv { height:123px;max-height:123px }
#theImg { max-height: inherit }