Style objectFit-egenskab

Definition og brug

objectFit Egenskaben bruges til at specificere, hvordan størrelsen på <img> eller <video> skal justeres for at passe til sin beholder.

Denne egenskab fortæller, hvordan indholdet skal fyldes i beholderen på flere måder; for eksempel "behold aspektforholdet" eller "udvid og brug så meget plads som muligt".

Se også:

CSS tutorial:CSS object-fit

CSS reference manual:object-fit-egenskab

Eksempel

Beskær billedets sider, behold aspektforholdet og fyld pladsen:

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

Prøv det selv

Syntaks

Retur objectFit-egenskab:

object.style.objectFit

Indstil objectFit-egenskab:

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

Egenskabsværdi

Værdi Beskrivelse
fill Standard. Juster størrelsen på det erstatte indhold for at fylde elementets indholdsboks. Hvis nødvendigt, vil objektet blive strakt eller komprimeret.
contain Skaler det erstatte indhold for at holde dets aspektforhold, mens det passer ind i elementets indholdsboks.
cover Juster størrelsen på det erstatte indhold, så det holder dens aspektforhold, mens det passer ind i elementets hele indholdsboks. Objektet vil blive beskåret.
none Erstatningsindholdet justeres ikke i størrelse.
scale-down Indholdets størrelse er samme som none eller contain, afhængigt af hvem der får den mindre objektstørrelse af de to.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arve denne egenskab fra sin forældrelige element. Se inherit.

Tekniske detaljer

Standardværdi: fill
Returværdi: streng, der angiver elementets object-fit-egenskab.
CSS version: CSS3

Browser-understøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne egenskab.

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