CSS-Eigenschaft object-position

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.