Lastnost object-fit

Lastnost object-fit določa razmerje stranic ali skaliranje elementov, kot so slike ali video.

Sintaksa

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

V tabeli so predstavljene glavne vrednosti za lastnost object-fit:

Vrednost	Opis
`fill`	Skaliranje elementa, da ustreza danim dimenzijam, pri čemer se razmerje stranic elementa ignorira.
`contain`	Skaliranje elementa, da ustreza danim dimenzijam, pri čemer se razmerje stranic elementa ohrani.
`cover`	Dimenzije elementa se spremenijo, da v celoti zapolnijo določeno območje, pri čemer se razmerje stranic elementa ohrani.
`none`	Ohranjene so izvirne dimenzije elementa.

Nastavimo naši sliki zapolnitev določene velikosti brez ohranjanja razmerja stranic:

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

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

Zdaj pa poskrbimo, da slika zapolni določen container z ohranjanjem razmerja stranic:

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

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

Zapolnimo container z našo sliko tako, da se velikost slike spremeni, vendar se hkrati ohrani njeno razmerje stranic:

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

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

Preprosto postavimo našo sliko v določen container z ohranitvijo njenih izvornih dimenzij:

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

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