Vlastnost object-fit

Vlastnost object-fit nastavuje poměr stran nebo škálování prvků jako je obrázek nebo video.

Syntaxe

selektor {
	object-fit: fill nebo contain nebo cover nebo none;
}

V tabulce jsou uvedeny hlavní hodnoty pro vlastnost object-fit:

Hodnota	Popis
`fill`	Škálování prvku pro odpovídání zadaným rozměrům, přičemž proporce prvku jsou ignorovány.
`contain`	Škálování prvku pro odpovídání zadaným rozměrům, přičemž proporce prvku jsou zachovány.
`cover`	Rozměry prvku jsou změněny, aby celé vyplnily určenou oblast, přičemž proporce samotného prvku jsou zachovány.
`none`	Původní rozměry prvku jsou zachovány.

Nastavme našemu obrázku vyplnění zadané velikosti bez zachování proporcí:

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

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

A nyní udělejme, aby obrázek vyplnil určený kontejner s zachováním proporcí:

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

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

Vyplňme naším obrázkem určený kontejner tak, aby se velikost samotného obrázku změnila, ale přitom byly zachovány jeho proporce:

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

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

Jednoduše vložme náš obrázek do určeného kontejneru s zachováním jeho původní velikosti:

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

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