Свойство object-fit - масштабирование элементов в CSS

Свойство object-fit задает соотношение сторон или масштабирование таких элементов как изображение или видео.

Синтаксис

селектор {
	object-fit: fill или contain или cover или none;
}

В таблице представлены основные значения для свойства object-fit:

Значение	Описание
`fill`	Масштабирование элемента для соответствия заданным размерам, при этом пропорции элемента игнорируются.
`contain`	Масштабирование элемента для соответствия заданным размерам, при этом пропорции элемента сохраняются.
`cover`	Размеры элемента изменяются, чтобы целиком заполнить указанную область, при этом пропорции самого элемента сохраняются.
`none`	Исходные размеры элемента сохраняются.

Давайте зададим нашему изображению заполнение указанного размера без сохранения пропорций:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

А теперь давайте сделаем так, чтобы изображение заполнило указанный контейнер с сохранением пропорций:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Давайте заполним нашим изображением указанный контейнер так, чтобы размер самого изображения изменился, но при этом были сохранены его пропорции:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Давайте просто поместим наше изображение в указанный контейнер с сохранением его исходных размеров:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}