object-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die object-position CSS-Eigenschaft legt die Ausrichtung der Inhalte des ausgewählten ersetzten Elements innerhalb des Element-Box fest. Bereiche der Box, die nicht vom Objekt des ersetzten Elements abgedeckt werden, zeigen den Hintergrund des Elements.

Sie können die Anpassung der intrinsischen Größe des Objekts des ersetzten Elements (also seine natürliche Größe) an die Box des Elements mit der Eigenschaft object-fit anpassen.

Probieren Sie es aus

Syntax

css
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

Werte

<position>

Ein bis vier Werte, die die 2D-Position des Elements definieren. Relative oder absolute Verschiebungen können verwendet werden.

Hinweis: Die Position kann so eingestellt werden, dass das ersetzte Element außerhalb seiner Box gezeichnet wird.

Formale Definition

Anfangswert50% 50%
Anwendbar aufersetzte Elemente
VererbtJa
Prozentwertebeziehen sich auf Breite und Höhe des Elements
Berechneter Wertwie angegeben
Animationstypa repeatable list

Formale Syntax

object-position = 
<position>

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
<length> |
<percentage>

Beispiele

Positionierung von Bildinhalten

HTML

Hier sehen wir HTML, das zwei <img>-Elemente enthält, die jeweils das MDN-Logo anzeigen.

html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

Das CSS enthält Standardstile für das <img>-Element selbst sowie separate Stile für jedes der beiden Bilder.

css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

Das erste Bild ist mit seinem linken Rand 10 Pixel vom linken Rand der Element-Box eingezogen. Das zweite Bild ist mit seinem rechten Rand bündig gegen den rechten Rand der Element-Box positioniert und befindet sich 10 % der Höhe der Element-Box nach unten.

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 3
# the-object-position

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
object-position

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch