Vlastnost object-fit
Vlastnost object-fit nastavuje
poměr stran nebo škálování
prvků jako je obrázek
nebo video.
Syntaxe
selektor {
object-fit: fill nebo contain nebo cover nebo none;
}
V tabulce jsou uvedeny hlavní hodnoty pro
vlastnost object-fit:
Hodnoty
| 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. |
Příklad
Nastavme našemu obrázku vyplnění zadané velikosti bez zachování proporcí:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Příklad
A nyní udělejme, aby obrázek vyplnil určený kontejner s zachováním proporcí:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Příklad
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:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Příklad
Jednoduše vložme náš obrázek do určeného kontejneru s zachováním jeho původní velikosti:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Viz také
-
vlastnost
aspect-ratio,
která definuje poměr stran prvku