Objekt-fit - CSS-tricks | CSS Almanak 2025

De object-fitejendom definerer, hvordan et Element reagerer på højden og bredden af dens indhold kasse. Det er beregnet til billeder, videoer og andre indlejrede medieformater i forbindelse med object-positionejendommen. Brugt af sig selv object-fitlader os beskære et integreret billede ved at give os finkornet kontrol over, hvordan det klemmer og strækker sig inde i sin kasse.

object-fit kan indstilles med en af disse fem værdier:

fill: dette er standardværdien, der strækker billedet, så det passer til indholdsfeltet, uanset dets billedformat.
contain: øger eller formindsker billedets størrelse for at udfylde feltet, samtidig med at billedformatet bevares.
cover: billedet udfylder højden og bredden af sin boks og opretholder igen sit billedformat, men beskærer ofte billedet i processen.
none: billedet ignorerer højden og bredden af forældrene og bevarer sin oprindelige størrelse.
scale-down: billedet sammenligner forskellen mellem noneog containfor at finde den mindste konkrete genstandsstørrelse.

Sådan indstiller vi denne egenskab:

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

Fordi det andet billede har et billedformat, der er forskelligt fra det originale billede til venstre, strækker det sig uden for området for dets indholdsfelt og beskærer den øverste og nederste del af billedet.

Det er værd at bemærke, at billedet som standard er centreret i dets indholdsfelt, men dette kan ændres med object-positionejendommen.

Demo

Demoen nedenfor viser fem eksempler, der beskriver, hvordan vi måske vil have, at et billede skal klemme ind i en indholdsboks, der undertiden er mindre eller større end dens oprindelige bredde (ændre størrelsen på browseren for en bedre idé om, hvordan dette kan fungere):

Se Pen-objekt-fit af Robin Rendle (@robinrendle) på CodePen.

Hvis billedets indhold ikke fylder indholdsfeltet af en eller anden grund, vil det uudfyldte rum vise elementets baggrund, i dette tilfælde en lysegrå baggrund.