Svojstvo object-fit

Svojstvo object-fit zadaje odnos stranica ili skaliranje elemenata kao što su slika ili video.

Sintaksa

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

U tabeli su predstavljene osnovne vrednosti za svojstvo object-fit:

Vrednost	Opis
`fill`	Skaliranje elementa da odgovara zadatim dimenzijama, pri čemu se proporcije elementa zanemaruju.
`contain`	Skaliranje elementa da odgovara zadatim dimenzijama, pri čemu se proporcije elementa čuvaju.
`cover`	Dimenzije elementa se menjaju, da bi u potpunosti popunile navedenu oblast, pri čemu se proporcije samog elementa čuvaju.
`none`	Očuvavaju se originalne dimenzije elementa.

Hajde da našoj slici zadamo popunjavanje navedene veličine bez očuvanja proporcija:

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

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

A sada hajde da napravimo da slika popuni navedeni kontejner sa očuvanjem proporcija:

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

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

Hajde da popunimo našom slikom navedeni kontejner tako da se veličina same slike promeni, ali da pritom budu očuvane njene proporcije:

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

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

Hajde da jednostavno smestimo našu sliku u navedeni kontejner sa očuvanjem njenih originalnih dimenzija:

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

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