Objektposition - CSS-Tricks | CSS-Almanach 2025

Die object-positionEigenschaft wird in Verbindung mit der object-fitEigenschaft verwendet und definiert, wie ein Element wie ein Video oder ein Bild mit X / Y-Koordinaten in seinem Inhaltsfeld positioniert wird. Diese Eigenschaft nimmt zwei numerische Werte an, z. B. 0 10%oder 0 10px. In diesen Beispielen gibt die erste Zahl an, dass das Bild links vom Inhaltsfeld (0) platziert werden soll, die zweite, dass es 10% oder 10 Pixel von oben positioniert werden soll. Es ist auch möglich, negative Werte zu verwenden.

Der Standardwert für object-positionist, 50% 50%wenn die object-fitEigenschaft für ein Bild verwendet wird, sodass standardmäßig alle Bilder in der Mitte ihres Inhaltsfelds positioniert werden, wie folgt:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Demo

Nachfolgend finden Sie einige Beispiele, wie Sie das object-positionBild mit der object-fitEigenschaft auf manipulieren können none. Wenn der Inhalt des Bildes aus irgendeinem Grund das Inhaltsfeld nicht ausfüllt, zeigt der nicht ausgefüllte Bereich den Hintergrund des Elements an, der eine Farbe oder sogar eine sein kann background-image, wie im letzten Beispiel:

Siehe die Position des Stiftobjekts von Robin Rendle (@robinrendle) auf CodePen.