Svojstvo object-fit

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

Sintaksa

cssselektor {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

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

Результат: