CSS Vlastnost přizpůsobená objektu
Vlastnost CSS object-fitse používá k určení, jak má být velikost <img> nebo <video> změněna, aby se vešla do kontejneru.
Vlastnost přizpůsobení objektu CSS
Vlastnost CSS object-fitse používá k určení, jak má být velikost <img> nebo <video> změněna, aby se vešla do kontejneru.
Tato vlastnost říká obsahu, aby naplnil kontejner různými způsoby; jako například „zachovat tento poměr stran“ nebo „roztáhnout a zabrat co nejvíce místa“.
Podívejte se na následující obrázek z Paříže. Tento obrázek je 400 pixelů široký a 300 pixelů vysoký:
Pokud však upravíme styl obrázku výše tak, aby měl poloviční šířku (200 pixelů) a stejnou výšku (300 pixelů), bude vypadat takto:
Příklad
img {
width: 200px;
height:
300px;
}
Vidíme, že se obrázek zmenšuje, aby se vešel do kontejneru 200x300 pixelů (jeho původní poměr stran je zničen).
Zde je uvedena object-fitvlastnost. object-fitVlastnost může nabývat jedné z následujících hodnot:
fill- Toto je výchozí nastavení. Velikost obrázku se změní tak, aby vyplnil daný rozměr. V případě potřeby bude obrázek roztažen nebo zmáčknut, aby se vešelcontain- Obrázek si zachová svůj poměr stran, ale jeho velikost se přizpůsobí danému rozměrucover- Obrázek si zachová poměr stran a vyplní daný rozměr. Obrázek bude oříznut tak, aby se vešelnone- Velikost obrázku není změněnascale-down- obrázek je zmenšen na nejmenší verzinonenebocontain
Použití objektu: kryt;
Pokud použijeme object-fit: cover;obrázek, zachová si poměr stran a vyplní daný rozměr. Obrázek bude oříznut, aby se vešel:
Příklad
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Použití object-fit: include;
Pokud použijeme object-fit: contain;obrázek, zachová si svůj poměr stran, ale jeho velikost se vejde do daného rozměru:
Příklad
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Použití object-fit: fill;
Pokud použijeme object-fit: fill;obrázek, velikost se změní tak, aby vyplnil daný rozměr. V případě potřeby bude obrázek roztažen nebo zmáčknut, aby se vešel:
Příklad
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Použití objektového přizpůsobení: žádné;
Pokud použijeme object-fit: none;, velikost obrázku se nezmění:
Příklad
img {
width: 200px;
height:
300px;
object-fit: none;
}
Použití objektového přizpůsobení: zmenšení;
Pokud použijeme object-fit: scale-down;obrázek, je zmenšen na nejmenší verzi nonenebo
contain:
Příklad
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Další příklad
Zde máme dva obrázky a chceme, aby vyplnily šířku 50 % okna prohlížeče a 100 % výšky.
V následujícím příkladu NEPOUŽÍVÁME object-fit, takže když změníme velikost okna prohlížeče, poměr stran obrázků bude zničen:
Příklad
V dalším příkladu použijeme object-fit: cover;, takže když změníme velikost okna prohlížeče, poměr stran obrázků je zachován:
Příklad
Přizpůsobení objektů CSS Další příklady
Následující příklad ukazuje všechny možné hodnoty object-fitvlastnosti na jednom příkladu:
Příklad
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Vlastnosti CSS Object-*
V následující tabulce jsou uvedeny vlastnosti CSS object-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |