CSS object-position egenskab

Definisjon og bruk

Bruk object-position sammen med object-fit for å bestemme hvordan x/y-koordinater skal brukes til å plassere <img> eller <video> i deres 'egne innholdskasser'.

Se også:

CSS undervisning:CSS object-fit

CSS referansehåndbok:CSS object-position

HTML DOM referansehåndbok:objectPosition-egenskapen

Eksempel

Juster størrelsen på bildet til å passe innholdskassen, og flytt bildet 5px til venstre og 10% opp i innholdskassen:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Prøv det selv

CSS-syntaks

object-position: position|initial|inherit;

Egenskapsverdi

Verdi Beskrivelse
position

Bestemmer plasseringen til et bilde eller en video i dens innholdskasse.

Den første verdien kontrollerer x-aksen, den andre verdien kontrollerer y-aksen.

Det kan være en streng (venstre, midte eller høyre) eller et tall (med px eller % som enhet). Negative verdier er tillatt.
initial Sett denne egenskapen til sin standardverdi. Se: initial.
inherit Arv denne egenskapen fra foreldrelementet. Se: inherit.

Tekniske detaljer

Standardverdi: 50% 50%
Arv: ja
Animasjonsproduksjon: Støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript-syntaks: object.style.objectPosition="0 10%"

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 10.0 19.0