Firefox игнорирует процентную высоту изображения

Question

Я разрабатываю веб-сайт для профессора, и у меня проблема с моим CSS в Firefox. Веб-сайт был спроектирован так, чтобы быть шириной/высотой жидкости, чтобы он заполнял экран на любом разрешении, поэтому из-за этого я использую много процентов для высоты и ширины. Однако у меня возникла проблема с изображениями.

http://projects.mediabounds.com/i.bradley.edu/

Верхняя полоса миниатюр должны масштаба изображения, но он не работает в Firefox, изображения остаться 100% их первоначальной высоты. Он отлично работает в Safari (не знаю об Internet Explorer). Я установил высоту 100% и ширину для авто. Я ожидаю, что он масштабирует изображение до 100% высоты div, а затем соответствующим образом отрегулирует ширину.

Может ли кто-нибудь указать, что я пропустил?

Answer 1

Вы должны указать изображение высотой 100%, но его родительский элемент должен быть желаемой высоты и ширины в процентах.

В основном создайте DIV, содержащий изображение, придайте DIV желаемую ширину и высоту в процентах или px. Поместите изображение внутри DIV и дайте ему высоту 100%.

Это как раз то, как Firefox обрабатывает изображения.

Answer 2

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