Style objectFit-egenskapen

Definition och användning

objectFit Egenskapen används för att definiera hur storleken på <img> eller <video> ska justeras för att passa in i behållaren.

Egenskapen informerar om hur innehållet ska fylla behållaren på flera sätt; till exempel "bevara förhållandet mellan bredd och höjd" eller "utvidga och använd så mycket utrymme som möjligt".

Se också:

CSS-tutorial:CSS object-fit

CSS referenshandbok:object-fit-egenskapen

Exempel

Skär bort sidorna på bilden, behåll förhållandet mellan bredd och höjd och fyll ut utrymmet:

document.getElementById("myImg").style.objectFit = "cover";

Prova själv

Syntaks

Returnera objectFit-egenskapen:

object.style.objectFit

Ställ in objectFit-egenskapen:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Egenskapsvärde

Värde Beskrivning
fill Standard. Justera storleken på det ersättande innehållet för att fylla elementets innehållsram. Om nödvändigt kommer objektet att sträckas eller komprimeras.
contain Skala upp det ersättande innehållet för att behålla förhållandet mellan bredd och höjd, samtidigt som det passar in i elementets innehållsram.
cover Justera storleken på det ersättande innehållet för att hålla proportionerna när det fyller hela innehållsramen för elementet. Objektet kommer att beskäras.
none Ersättande innehåll justeras inte i storlek.
scale-down Innehållets storlek är densamma som none eller contain, beroende på vilken av dem som får den minsta objektstorleken.
initial Sätt detta egenskap till dess standardvärde. Se initial.
inherit Följer detta egenskap från sina föräldrelement. Se inherit.

Tekniska detaljer

Standardvärde: fill
Returvärde: sträng som anger elementets object-fit-egenskapen.
CSS-version: CSS3

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsareversion som helt stöder detta egenskap.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0