Objektpassning - CSS-tricks | CSS Almanack 2025

De object-fitfastighets definierar hur ett element svarar på höjden och bredden av dess innehåll box. Den är avsedd för bilder, videor och andra inbäddningsbara mediaformat i samband med object-positionfastigheten. Används av sig själv, object-fitlåter oss beskära en inbyggd bild genom att ge oss finkornig kontroll över hur den klämmer och sträcker sig inuti sin låda.

object-fit kan ställas in med ett av dessa fem värden:

fill: detta är standardvärdet som sträcker bilden så att den passar innehållsrutan, oavsett bildförhållande.
contain: ökar eller minskar storleken på bilden så att rutan fylls samtidigt som bildformatet bibehålls.
cover: bilden kommer att fylla höjden och bredden på sin ruta och återigen behålla sitt bildförhållande men ofta beskära bilden under processen.
none: bilden ignorerar föräldrarnas höjd och bredd och behåller sin ursprungliga storlek.
scale-down: bilden jämför skillnaden mellan noneoch containför att hitta den minsta konkreta objektstorleken.

Så här kan vi ställa in den här egenskapen:

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

Eftersom den andra bilden har ett bildförhållande som skiljer sig från originalbilden till vänster kommer den att sträcka sig utanför ramen för innehållsrutan och beskära bildens övre och nedre del.

Det är värt att notera att bilden som standard är centrerad i innehållsrutan, men detta kan ändras med object-positionegenskapen.

Demo

Demon nedan visar fem exempel som beskriver hur vi kanske vill att en bild ska klämma in i en innehållsruta som ibland är mindre eller större än dess ursprungliga bredd (ändra storlek på webbläsaren för en bättre uppfattning om hur detta kan fungera):

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

Om innehållet i bilden inte fyller innehållsrutan av någon anledning kommer det ofyllda utrymmet att visa elementets bakgrund, i detta fall en ljusgrå bakgrund.

Webbläsarstöd

Det är värt att notera att iOS 8-9.3 och Safari 7-9.1 object-fitegenskapen men inte object-position.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.