CSS/Eigenschaften/object-position

Browserunterstützung
caniuse.com

Die Eigenschaft object-position bestimmt ähnlich der background-position, an welcher Stelle sich die linken oberen Ecken von ersetzten Elementen befinden sollen

Erlaubte Werte

• Längenangabe in Prozent: (Standardwert 50% 50%)
  Die erste Längenangabe bezeichnet dabei die Position in x-Richtung, die zweite die in y-Richtung. Auch negative Werte sind möglich.
  
  Beachten Sie: Wird nur eine Längenangabe gemacht, so ist dies die horizontale Position, der fehlende Wert wird mit center initialisiert.

• Schlüsselwörter:
  • left, center, right, für die horizontale Positionierung
  • top, center, bottom, für die vertikale Positionierung
    
    Beachten Sie: Wird von diesen Schlüsselwörtern nur ein Wert gesetzt, so wird die fehlende Angabe mit center initialisiert.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

fill

anwendbar auf

ersetzte Elemente

Vererbung

nein

animierbar

nein

Beispiel

.rund {
 object-fit: cover;
 object-position: 50% 0;
 border-radius: 50%;
 width: 15em;
 height: 15em;
}

 

Siehe auch

• Bilder im Internet
  • Bilder im Internet/Einbindung mit img
    Größenanpassung mit object-fit
  • Bilder im Internet/responsive Bilder mit picture
    Art Direction mit object-fit und object-position

Weblinks

• Spezifikation (W3C): Sizing Objects: the object-position property
• MDN: object-position
• Details: caniuse.com