У меня есть элемент 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 кажется, работает правильно.. Я не могу найти, что в моем проекте заставляет его не работать.