CSS-Eigenschaft object-position

Die Eigenschaft object-position wird zusammen mit der Eigenschaft object-fit verwendet, um festzulegen, wie ein Element mit x/y-Koordinaten in seiner Inhaltsbox positioniert werden soll. Der erste Wert steuert die x-Achse und der zweite Wert steuert die y-Achse.

Diese Eigenschaft kann durch eine Zeichenkette (links, mitte oder rechts) oder eine Zahl (in px oder %) angegeben werden.

Negative Werte sind gültig.
Anfangswert 50% 50%
Gilt für Ersetzte Elemente
Geerbt Ja
Animierbar Ja, das Bild ist animierbar.
Version CSS3
DOM Syntax object.style.objectPosition = "20% 0%";

Syntax

object-fit: position | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft object-position</h2>
    <h3>Originalbild:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: 50% 50%</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

In diesem Beispiel ist object-position durch "left" definiert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: left;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft object-position</h2>
    <h3>Originalbild:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: left</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Ein anderes Beispiel, wo die Werte durch "px" und "%" angegeben sind:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 10px 20%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft object-position</h2>
    <h3>Originalbild:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: left</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Werte

Wert Beschreibung
position Gibt die Position des Elements innerhalb seiner Inhaltsbox an.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
31.0+ 16.0 partial 36.0+ 10.0+ 19.0+
11.6 -o-

Übe dein Wissen

Welche CSS-Eigenschaft wird verwendet, um die Position eines Ersatzobjekts innerhalb des Anzeigebereichs eines Elements anzugeben?
Finden Sie das nützlich?