Свойство object-fit

Свойството 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;
}

Вижте също

свойството aspect-ratio,
което определя съотношението на страните на елемента