CSS object-position egenskap

Definition och användning

Använd object-position tillsammans med object-fit för att definiera hur x/y-koordinater används för att positionera <img> eller <video> inom deras "egna innehållsram".

Se också:

CSS-tutorial:CSS object-fit

CSS-handbok:CSS object-position

HTML DOM-handbok:objectPosition-egenskapen

Exempel

Justera storleken på bilden så att den passar in i dess innehållsram och flytta bilden 5px från vänster och 10% från toppen av ramen:

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

Prova själv

CSS-syntax

object-position: position|initial|inherit;

Egenskapsvärde

Värde Beskrivning
position

Bestämmer positionen för en bild eller video inom dess innehållsram.

Den första värdet styr x-axeln, den andra värdet styr y-axeln.

Kan vara en sträng (vänster, mitt eller höger) eller ett nummer (i px eller %). Negativa värden tillåtna.
initial Sätt detta egenskap till dess standardvärde. Se vidare: initial.
inherit Följer från föräldrelementet och arver detta egenskap. Se vidare: inherit.

Tekniska detaljer

Standardvärde: 50% 50%
Arv: ja
Animeringsproduktion: Stöds. Se vidare:Animeringsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.objectPosition="0 10%"

Webbläsarstöd

Talen i tabellen anger den första webbläsare som fullständigt stöder detta egenskap.

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