Object-fit
Object-fit se používá na to, aby se obrázek zadáním rozměrů nedeformoval, ale aby se raději nějak oříznul nebo aby případně nevyplnil celý svůj prostor. Má to smysl v případě, že obrázek má nastavené jiné velikosti, než je skutečná velikost obrázku (tu prohlížeč zjistí načtením souboru s obrázkem). Funguje též na video.
| hodnoty | jak se obrázek zobrazí |
|---|---|
| fill | Obrázek upraví svůj poměr stran tak, aby se přesně vešel do určených rozměrů. Může se deformovat. Výchozí hodnota, takhle se obrázky chovaly vždycky. |
| cover | Obrázek nezmění poměr stran. Větší se nebo zmenší tak, aby alespoň jedna strana obrázku plně využila svůj rozměr. Zbytek se může oříznout. |
| none | Obrázek nemění poměr stran ani se nijak nezvětšuje nebo nezmenšuje. Přidělený prostor buďto zaplní nebo nezaplní, takže se může oříznou nebo po straně nechat volné místo. |
| contain | Obrázek nezmění poměr stran. Zmenší nebo zvětší se tak, aby se do určených rozměrů vešel celý a žádná jeho část nebyla skryta. |
| scale-down | Jako contain, ale obrázek se nikdy nezvětší. Takže nemění poměr stran, bude vidět celý, ale v případě většího prostoru nechá po stranách volné místo. |
Představte si obrázek:
- skutečná velikost obrázku ze souboru je 100 x 100
- v HTML nebo CSS má zadané rozměry 200 x 300
V normální situaci by se obrázek zdeformoval a vyplnil by celý obdélník 200 x 300. Když ale nebudu chtít, aby se deformoval, můžu použít object-fit s nějakou hodnotou. Object-fit tedy řeší, jak se má dát do souladu skutečná velikost obrázku s velikostí, kterou obrázek dostane ve stránce.
| hodnota | drží poměr stran? | ořízne se? | nechá volné místo? | zvětší? | zmenší? |
|---|---|---|---|---|---|
| fill nebo nezadáno | NE | NE | NE | ANO | ANO |
| cover | ANO | ANO | NE | ANO | ANO |
| none | ANO | ANO | ANO | NE | NE |
| contain | ANO | NE | ANO | ANO | ANO |
| scale-down | ANO | NE | ANO | NE | ANO |
Podívejte se na příklad na object-fit, z něj je to velmi dobře vidět.
Kromě obrázků se dá object-fit použít na další nahrazované prvky, což je hlavně video.
Použití object-fit vidím hlavně v responzivním designu. Pokud se dělá stránka na pevnou šířku, pak není problém dát obrázku přesně tu velikost, kterou má i v souboru. Pokud ale nevím předem, jaká bude velikost displaye, ale zároveň chci, aby se obrázek vešel na šířku, pak musím počítat s tím, že obrázek bude mít ve stránce jiné rozměry, než jaké má ve skutečnosti.
Object-position
Když se obrázek musí oříznout nebo nechat po okraji volné místo, dělá to ve výchozím nastavení tak, aby střed obrázku byl přesně ve středu obdélníku, který má obrázek na stránce vymezený. Jinak řečeno, vlastnost object-position má výchozí hodnotu 50% 50%.
img {
object-fit: cover;
object-position: 50% 50%; /* výchozí hodnota */
}
Object-position je vlastnost, která umožňuje s obrázkem uvnitř jeho vymezeného prostoru ještě někam šoupnout. Hodnoty jsou stejné jako u vlastnosti background-position a stejně tak fungují i procentuální hodnoty. Když zadám například 10%, říkám tím, že bod v 10 procentech šířky obrázku má zařezávat s bodem v 10 procentem šířky vymezeného prostoru.
Object-position dokáže obrázek odsunout i tak, že nebude vůbec vidět.
Podpora
Na jaře 2017 je jediný výraznější problém, že IE a Edge object-fit nepodporuje. Na chování object-fit se tedy nelze dobře spolehnout.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explore | ne | |
| Edge | ano | ale jen pro obrázky <img>, nikoli pro jiné objekty jako je například video |
| Firefox | všechny verze | |
| Chrome, Safari, Opera | všechny verze |
Příklad
Nejjednodušší příklad ukazuje obrázek, který se raději ořízne, než aby se zdeformoval. Abyste pochopili, že ne vždy je předem znám prostor, který obrázek dostane, tak v tomto případě má stoprocentní šířku (počítá se z nadřazeného prvku) a výšku má 40 procent výšky prohlížeče.
img {
width: 100%; height: 40vh;
object-fit: contain;
}
Obrázek může mít po okrajích místo, ale bude vidět celý a nebude zdeformovaný.
Reklama
