Tárgy-illeszkedés - CSS-trükkök

A object-fittulajdonság meghatározza, hogy az elem hogyan reagál a tartalomdobozának magasságára és szélességére. Képek, videók és más beágyazható médiaformátumok számára készült, a object-positiontulajdonsággal együtt . Önmagában használva object-fitlehetővé teszi a beillesztett kép kivágását azáltal, hogy részletgazdag kontrollt biztosítunk arról, hogyan guggol és nyújtózkodik a dobozában.

object-fit az alábbi öt érték egyikével állítható be:

fill: ez az alapértelmezett érték, amely kinyújtja a képet, hogy illeszkedjen a tartalom mezőbe, függetlenül annak képarányától.
contain: növeli vagy csökkenti a kép méretét, hogy kitöltse a mezőt, miközben megőrzi a képarányát.
cover: a kép kitölti a doboz magasságát és szélességét, ismét megtartva a képarányát, de közben gyakran levágja a képet.
none: a kép figyelmen kívül hagyja a szülő magasságát és szélességét, és megtartja eredeti méretét.
scale-down: a kép összehasonlítja a különbséget a noneés containközött, hogy megtalálja a legkisebb konkrét tárgyméretet.

Így állíthatjuk be azt a tulajdonságot:

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

Mivel a második kép képaránya eltér a bal oldali eredeti képtől, a tartalom mezőjén kívül fog kinyúlni, levágva a kép felső és alsó részét.

Érdemes megjegyezni, hogy alapértelmezés szerint a kép a tartalom mezőben középre kerül, de ez a object-positiontulajdonsággal megváltoztatható .

Demó

Az alábbi bemutató öt példát mutat be, amelyek részletesen bemutatják, hogyan lehet, hogy egy kép az eredeti szélességénél kisebb vagy nagyobb tartalomdobozba szétcsúszik (méretezze át a böngészőt, hogy jobban áttekinthesse ennek működését):

Lásd Robin Rendle (@robinrendle) tollobjektumát a CodePen-en.

Ha a kép tartalma bármilyen okból nem tölti ki a tartalom mezőt, akkor a kitöltetlen hely megmutatja az elem hátterét, jelen esetben világosszürke hátteret.

Böngésző támogatás

Érdemes megjegyezni, hogy az iOS 8-9.3 és a Safari 7-9.1 object-fittulajdonságok, de nem object-position.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.