Objekt-passform - CSS-triks | CSS-almanakk 2025

De object-fitfasiliteter definerer hvordan et element svarer til høyden og bredden av dets innhold esken. Den er ment for bilder, videoer og andre innebygde medieformater i forbindelse med object-positioneiendommen. Brukes av seg selv, object-fitlar oss beskjære et innebygd bilde ved å gi oss finkornet kontroll over hvordan det klemmer og strekker seg inne i esken.

object-fit kan settes med en av disse fem verdiene:

fill: dette er standardverdien som strekker bildet slik at det passer til innholdsboksen, uavhengig av størrelsesforholdet.
contain: øker eller reduserer størrelsen på bildet for å fylle boksen mens du beholder størrelsesforholdet.
cover: bildet vil fylle høyden og bredden på boksen, og igjen opprettholde sideforholdet, men beskjærer ofte bildet i prosessen.
none: bildet vil ignorere høyden og bredden på foreldrene og beholde sin opprinnelige størrelse.
scale-down: bildet vil sammenligne forskjellen mellom noneog containfor å finne den minste konkrete gjenstandsstørrelsen.

Slik kan vi sette den egenskapen:

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

Fordi det andre bildet har et størrelsesforhold som er annerledes enn det opprinnelige bildet til venstre, vil det strekke seg utenfor innholdsfeltet og beskjære de øverste og nederste delene av bildet.

Det er verdt å merke seg at bildet som standard er sentrert i innholdsboksen, men dette kan endres med object-positioneiendommen.

Demo

Demoen nedenfor viser fem eksempler som beskriver hvordan vi kanskje vil at et bilde skal klemmes inn i en innholdsboks som noen ganger er mindre eller større enn den opprinnelige bredden (endre størrelsen på nettleseren for å få en bedre ide om hvordan dette kan fungere):

Se Pen object-fit av Robin Rendle (@robinrendle) på CodePen.

Hvis innholdet i bildet ikke fyller innholdsboksen av en eller annen grunn, vil det utfylte rommet vise elementets bakgrunn, i dette tilfellet en lysegrå bakgrunn.