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).

object-fit
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:

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.

co si různé hodnoty object-fit dovolí
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.

Podpora object-fit
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer a Edge ne  
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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.