Lastnost object-fit

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

Sintaksa

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

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

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

Результат:

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

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

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

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

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

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

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

Результат: