Hva er CSS object-fit og hvordan bruke det?

object-fit: cover, eksempel.Jeg har tidligere skrevet om bruk av background-size: cover for å lage et heldekkende skalerbart bakgrunnsbilde på en nettside (spørsmålet kom opp på vårt kurs i HTML5 og CSS3).

object-fit: cover fungerer på tilsvarende måte, men brukes for å formatere bilder og video, og bestemme hvordan et bilde eller en video skal skaleres/plasseres innenfor et avgrenset område.

object-fit: cover sørger for å beskjære og sentrere bildet, innenfor angitt bredde og høyde.

object-fit, caniuse. Skjermbilde.
Skjermbilde fra caniuse.com, februar 2015.

Støtten for bruk av object-fit i dagens nettlesere ser du på skjermbildet ovenfor.

annonse

object-fit: cover, fill, contain, none og scale-down

Utgangspunktet vårt:

Elg med briller. Foto.

Vi setter først dimensjonene på bildet slik at vi har et utgangspunkt for skalering.

Cover – skaleres og midtstilles

object-fit: cover, eksempel.

Fill – strekk bilde for å fylle området

object-fit: fill, eksempel.

Contain – behold proposjoner

object-fit: contain, eksempel.

None – ingen skalering

object-fit: none, eksempel.

Scale-down

object-fit: scale-down, eksempel.
Del: