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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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