Отзывчивое изображение в контейнере с фиксированным соотношением сторон в 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

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

width:100%; 
    height:auto 

Answer 2

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

.responsive-container { 
    height: 0px; 
} 

-

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

работает Пример

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

Answer 3

вчера у меня была аналогичная проблема, и положить вместе с this JSFIddle вдохновение из this technique for CSS aspect ratios.

Похоже, что соотношение сторон вашего класса .responsive-container работает нормально, но максимальная высота и максимальная ширина на 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 4

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

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