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

Initialer Wert50% 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

BCD tables only load in the browser

Siehe auch