СВОЙСТВО OBJECT-FIT

Свойство object-fit определяет способ заполнения изменяемого элемента, такого как <img> или <video>, относительно его размеров.

Поддержка браузеров


16+

object-fit: fill|contain|cover|scale-down|none|initial|inherit

Значение	Описание
fill	Содержимое элемента будет растянут или сжат так чтобы заполнить элемент. Это значение по умолчанию.
contain	Содержимое элемента будет подстравиваться под размер элемента соблюдая собственные пропорции.
cover	Содержимое элемента будет заполнять элемент полностью соблюдая собственные пропорции.
scale-down	Содержимое элемента будет подстраиваться под элемент таким образом, чтобы найти свой наименьший размер.
none	одержимое элемента не будет изменяться.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

<img src="/images/solar-system-400.jpg">

HTML

img {
    height: 150px;
    width: 300px;
    object-fit: cover
}

CSS