Адаптивное изображение в контейнере с фиксированным соотношением сторон в Firefox

Question

У меня есть контейнер с фиксированным соотношением сторон.

У меня есть изображение с максимальной шириной и высотой воска. Изображение должно содержаться в пределах контейнера.

Я отлично работаю в Chrome, но не работает в Firefox.

.responsive-container {
    width: 100%;
    height: 0px;
    padding-bottom: 60%;
    box-sizing: padding-box;
    border: 3px solid yellow;
}

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

Вот скрипка: http://jsfiddle.net/nqkpszxz/2/

Answer 1

Вы пытались добавить свойство 'fit-fit' к элементу изображения, помимо установки его высоты / максимальной высоты, ширины / максимальной ширины?

https://css-tricks.com/almanac/properties/o/object-fit/

Answer 2

У меня вчера была похожая проблема, и я собрал этот JSFIddle с вдохновением от этой техники для соотношений сторон CSS.

Похоже, что соотношение сторон для вашего класса.responsive-container работает просто отлично, но max-height и max-width для img, похоже, не работают. Вот с чем я столкнулся вчера.

Осмотревшись немного, я пришел к тому, что обычно не делал, и решил попробовать встроенный стиль:

<div class="image" style="background-image: url('https://placehold.it/150x350');"></div>

Сопровождается следующим CSS:

.image {
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
}

Кажется, до сих пор работает для меня. Я подумал, что это стоит того, чтобы поделиться, даже если уже немного поздно.

Answer 3

Попробуйте установить height:autoОбычно основы создания адаптивного блока

  width:100%;
  height:auto

Answer 4

Изменить это, и это будет работать

.responsive-container {  
    height: 0px;
}

в

.responsive-container {  
    height:100%;//values changed
}

ПРИМЕР работы

http://jsfiddle.net/nqkpszxz/4/