CSS пропорциональные изображения ведут себя по-разному на Chrome и Firefox

Question

У меня есть div с изображением внутри. Изображения имеют разный размер и ориентацию, я хочу, чтобы изображения изменялись пропорционально, если размер изображения больше кадра (изображения должны сохранять исходный размер, если они меньше кадра).

Моя проблема заключается в том, что изображение не изменяется пропорционально в Firefox (изображение больше не пропорционально, высота увеличивается, если ширина изображения превышает свойство max-width, хотя ширина соответствует свойству max-width), но выглядит нормально на Chrome.

Я не уверен, что это может быть исправлено только с помощью CSS, но предпочтительным будет только CSS-решение, если оно есть.

КОД

.frame { 
 
    width: 160px; 
 
    height: 160px; 
 
    border: 10px solid #333; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
} 
 
.frame img { 
 
    box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9); 
 
    max-width: 140px; 
 
    max-height: 140px; 
 
}

<div class="frame"> 
 
    <img src="//s3.amazonaws.com/ssiCebu/Confirmit/APAC/2015/May/23991558_LowRateRepricing/cards/1.jpg" /> 
 
</div> 
 
<br><br> 
 
<div class="frame"> 
 
    <img src="//i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg" /> 
 
</div>

Answer 1

Здесь работает скрипку для примера: https://jsfiddle.net/tjmrmLcc/2/

Try и редактировать следующие правила CSS

.frame img { 
    box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9); 
    width:100% /*Added Rule*/ 
    max-width: 100%; 
    max-height: 140px; 
}