CSS object-fit egenskab

Definisjon og bruk

objectFit-egenskapen brukes til å bestemme hvordan <img> eller <video> størrelse skal justeres for å tilpasse seg beholderen.

Denne egenskapen informerer om hvordan innholdet skal fylles i beholderen. For eksempel 'behold aspektforhold' eller 'utvid og okkupér så mye plass som mulig'.

Les også:

CSS kurs:CSS object-fit

CSS referansehåndbok:CSS object-position

HTML DOM referansehåndbok:objectFit-egenskapen

Eksempel

Beskjær bildets kanter, behold aspektforholdet, og deretter fyll ut rommet:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Prøv det selv

CSS-syntaks

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Egenskapsverdi

Verdi Beskrivelse
fill Standardverdi. Juster størrelsen på det erstattede innholdet for å fylle innholdskassen til elementet. Hvis nødvendig, vil objektet strekkes eller komprimeres.
contain Skaler innholdet som erstattes for å holde på aspektforholdet, samtidig som det passer inn i elementets innholdskasse.
cover Juster størrelsen på det erstattede innholdet for å fylle hele innholdskassen til elementet mens man holder på aspektforholdet. Objektet vil bli beskåret.
none Innholdet som erstattes justeres ikke i størrelse.
scale-down Innholdets størrelse er lik none eller contain, avhengig av hvilken som får den minste objektstørrelsen mellom dem to.
initial Sett denne egenskapen til sin standardverdi. Se: initial.
inherit Arv denne egenskapen fra foreldrelementet. Se: inherit.

Tekniske detaljer

Standardverdi: Se separate egenskaper.
Arv: Nei
Animasjonsproduksjon: Ikke støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript-syntaks: object.style.objectFit="cover"

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter denne egenskapen.

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