Vlastnost object-fit

Vlastnost object-fit nastavuje poměr stran nebo škálování prvků jako je obrázek nebo video.

Syntaxe

cssselektor {
  object-fit: fill nebo contain nebo cover nebo none;
}

V tabulce jsou uvedeny hlavní hodnoty pro vlastnost object-fit:

Hodnota	Popis
`fill`	Škálování prvku pro odpovídání zadaným rozměrům, přičemž proporce prvku jsou ignorovány.
`contain`	Škálování prvku pro odpovídání zadaným rozměrům, přičemž proporce prvku jsou zachovány.
`cover`	Rozměry prvku jsou změněny, aby celé vyplnily určenou oblast, přičemž proporce samotného prvku jsou zachovány.
`none`	Původní rozměry prvku jsou zachovány.

Nastavme našemu obrázku vyplnění zadané velikosti bez zachování proporcí:

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

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

Результат:

A nyní udělejme, aby obrázek vyplnil určený kontejner s zachováním proporcí:

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

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

Результат:

Vyplňme naším obrázkem určený kontejner tak, aby se velikost samotného obrázku změnila, ale přitom byly zachovány jeho proporce:

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

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

Результат:

Jednoduše vložme náš obrázek do určeného kontejneru s zachováním jeho původní velikosti:

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

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

Результат: