Přizpůsobení objektu - Triky CSS

K object-fitvlastnictví definuje, jak nějaký prvek reaguje na výšku a šířku jejího obsahu krabice. Je určen pro obrázky, videa a další vložitelné formáty médií ve spojení s touto službou object-position. Používá se samo o sobě a object-fitumožňuje nám oříznout vložený obrázek tím, že nám dává jemnozrnnou kontrolu nad tím, jak se roztáhne a roztáhne uvnitř své krabice.

object-fit lze nastavit s jednou z těchto pěti hodnot:

fill: toto je výchozí hodnota, která roztáhne obraz tak, aby se vešel do pole obsahu, bez ohledu na jeho poměr stran.
contain: zvětší nebo zmenší velikost obrázku, aby vyplnil rámeček, při zachování jeho poměru stran.
cover: obrázek vyplní výšku a šířku rámečku, přičemž si opět zachová svůj poměr stran, ale v průběhu procesu obrázek často ořízne.
none: obrázek bude ignorovat výšku a šířku nadřazeného prvku a zachová si původní velikost.
scale-down: obrázek porovná rozdíl mezi nonea containza účelem nalezení nejmenší velikosti konkrétního objektu.

Takto můžeme nastavit tuto vlastnost:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Protože druhý obrázek má poměr stran, který se liší od původního obrázku vlevo, bude se táhnout mimo oblast jeho pole obsahu a ořízne horní a dolní část obrazu.

Stojí za zmínku, že ve výchozím nastavení je obrázek vycentrován do pole s obsahem, ale toto lze u object-positionvlastnosti změnit .

Ukázka

Demo níže ukazuje pět příkladů podrobně popisujících, jak bychom mohli chtít, aby se obrázek promítl do pole obsahu, které je někdy menší nebo větší než jeho původní šířka (pro lepší představu o tom, jak by to mohlo fungovat, změňte velikost prohlížeče):

Podívejte se na objekt Pen-fit od Robina Rendleho (@robinrendle) na CodePen.

Pokud obsah obrázku z jakéhokoli důvodu nevyplňuje pole obsahu, pak nevyplněný prostor zobrazí pozadí prvku, v tomto případě světle šedé pozadí.

Podpora prohlížeče

Stojí za zmínku, že iOS 8-9.3 a Safari 7-9.1 object-fitvlastnost, ale ne object-position.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.