Prispôsobenie objektu - Triky CSS

K object-fitvlastníctva definuje, ako nejaký prvok reaguje na výšku a šírku jej obsahu škatule. Je určený pre obrázky, videá a ďalšie vložiteľné formáty médií v spojení s object-positionvlastníctvom. Ak je použitý sám o sebe, object-fitumožňuje nám orezať vložený obrázok tým, že nám dáva jemnozrnnú kontrolu nad tým, ako sa roztiahne a roztiahne vo vnútri poľa.

object-fit možno nastaviť pomocou jednej z týchto piatich hodnôt:

fill: toto je predvolená hodnota, ktorá roztiahne obrázok tak, aby sa zmestil do poľa obsahu, bez ohľadu na jeho pomer strán.
contain: zväčšuje alebo zmenšuje veľkosť obrázka tak, aby vyplnil rámček, pri zachovaní jeho pomeru strán.
cover: obrázok vyplní výšku a šírku jeho poľa, čím sa opäť zachová jeho pomer strán, ale často sa proces orezá.
none: obrázok bude ignorovať výšku a šírku rodiča a zachová si pôvodnú veľkosť.
scale-down: obrázok porovná rozdiel medzi nonea contains cieľom nájsť najmenšiu konkrétnu veľkosť objektu.

Takto môžeme nastaviť túto vlastnosť:

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

Pretože druhý obrázok má iný pomer strán ako pôvodný obrázok vľavo, roztiahne sa mimo sféru poľa s obsahom a orezá hornú a spodnú časť obrázka.

Stojí za zmienku, že obraz je predvolene vycentrovaný v poli s obsahom, ale toto je možné zmeniť pomocou object-positionvlastnosti.

Ukážka

Demo nižšie zobrazuje päť príkladov podrobne popisujúcich, ako by sme mohli chcieť, aby sa obrázok prehnal do poľa obsahu, ktoré je niekedy menšie alebo väčšie ako jeho pôvodná šírka (pre lepšiu predstavu o tom, ako by to mohlo fungovať, zmeňte veľkosť prehliadača):

Prezrite si aplikáciu Pen object-fit od Robina Rendleho (@robinrendle) na stránkach CodePen.

Ak obsah obrázka z akýchkoľvek dôvodov nevyplní obsahové políčko, nevyplnený priestor zobrazí pozadie prvku, v tomto prípade svetlošedé pozadie.

Podpora prehliadača

Stojí za zmienku, že iOS 8-9.3 a Safari 7-9.1 sú object-fitvlastníctvom, ale nie object-position.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.