Vlastnosť object-fit

Vlastnosť object-fit nastavuje pomer strán alebo škálovanie prvkov ako je obrázok alebo video.

Syntax

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

V tabuľke sú uvedené hlavné hodnoty pre vlastnosť object-fit:

Hodnota	Popis
`fill`	Škálovanie prvku pre vyplnenie zadaných rozmerov, pričom proporcie prvku sú ignorované.
`contain`	Škálovanie prvku tak, aby sa zmestil do zadaných rozmerov, pričom proporcie prvku sú zachované.
`cover`	Rozmery prvku sú zmenené tak, aby úplne vyplnili určenú oblasť, pričom proporcie prvku sú zachované.
`none`	Pôvodné rozmery prvku sú zachované.

Nastavme nášmu obrázku vyplnenie špecifikovaného rozmeru bez zachovania pomeru strán:

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

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

Результат:

A teraz nastavme, aby obrázok vyplnil určený kontajner so zachovaním pomeru strán:

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

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

Результат:

Nastavme, aby náš obrázok vyplnil určený kontajner tak, že veľkosť samotného obrázka sa zmení, ale pri tom budú zachované jeho proporcie:

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

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

Результат:

Jednoducho umiestnime náš obrázok do určeného kontajnera so zachovaním jeho pôvodných rozmerov:

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

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

Результат: