Vlastnosť object-fit

Vlastnosť object-fit nastavuje pomer strán alebo škálovanie prvkov ako je obrázok alebo video.

Syntax

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

V tabuľke sú uvedené hlavné hodnoty pre vlastnosť object-fit:

Hodnota	Popis
`fill`	Škálovanie prvku pre vyplnenie zadaných rozmerov, pričom proporcie prvku sú ignorované.
`contain`	Škálovanie prvku tak, aby sa zmestil do zadaných rozmerov, pričom proporcie prvku sú zachované.
`cover`	Rozmery prvku sú zmenené tak, aby úplne vyplnili určenú oblasť, pričom proporcie prvku sú zachované.
`none`	Pôvodné rozmery prvku sú zachované.

Nastavme nášmu obrázku vyplnenie špecifikovaného rozmeru bez zachovania pomeru strán:

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

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

A teraz nastavme, aby obrázok vyplnil určený kontajner so zachovaním pomeru strán:

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

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

Nastavme, aby náš obrázok vyplnil určený kontajner tak, že veľkosť samotného obrázka sa zmení, ale pri tom budú zachované jeho proporcie:

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

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

Jednoducho umiestnime náš obrázok do určeného kontajnera so zachovaním jeho pôvodných rozmerov:

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

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