Почему не правильно масштабируется высота изображения?

Question

Так что я работаю на галерее, где изображения показаны в элементе списка 200x200px

#gallery-list-ui li { 
    display: block; 
    margin: 10px; 
    height: 200px; 
    width: 200px; 
    overflow: hidden; 
} 

Для того, чтобы иметь портрет/пейзаж изображения использовать всю высоту/ширину, я использую JavaScript, чтобы решить, если я должен установить либо высоту, либо ширину до 100%.

var portrait = ($img.height() > $img.width() ? true : false); 

if(portrait){ 
    $img.css({'width' :'100%', 'height' : 'auto'}); 
} else { 
    $img.css({'height' :'100%', 'width' : 'auto'}); 
} 

В результате, портретные изображения весы правильно

<img src="img.jpg" style="width: 100%; height: auto;"> 

но ландшафтные изображения масштабируется 100% своей первоначальной высоты и не ограничивается высотой списка.

<img src="img.jpg" style="height: 100%; width: auto;"> 

Что я здесь отсутствует? Может ли кто-нибудь объяснить, почему это происходит? Смотрите мою скрипка здесь: https://jsfiddle.net/smyhbckx/5/

Answer 1

Добавить высоту .img-контейнер:

.img-container{ 
    height: 100%; 
} 

Высота CSS очень строгая. Он основан на прямой родительской высоте элемента. Прямым родителем img является .img-container - который не имеет высоты (то есть height: auto;). Анализатор распознает это как неизвестное число, и поэтому высота img не масштабируется.

Answer 2

Попробуйте с object-fit:cover;height:100% собственности на изображение, а также добавить следующие стили в контейнер

.img-container { 
    width: 200px; 
    height: 200px; 
} 

Я надеюсь, что это позволит решить проблему

https://jsfiddle.net/smyhbckx/7/