CSS-Objektpositionseigenschaft


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die CSS-Eigenschaft object-position wird verwendet, um anzugeben, wie ein <img> oder <video> positioniert werden soll in seinem Behälter.


Das Bild

Schauen Sie sich das folgende Bild aus Paris an, das 400 x 300 Pixel groß ist:

Paris

Als nächstes verwenden wir die CSS-Eigenschaft

object-fit: cover;

um das Seitenverhältnis beizubehalten und die vorgegebene Dimension auszufüllen. Das Bild wird jedoch so zugeschnitten, dass es passt:

Paris

Beispiel

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>




Verwenden der Eigenschaft „object-position“.

Nehmen wir an, der angezeigte Teil des Bildes ist nicht wie gewünscht positioniert. Um das Bild zu positionieren, verwenden wir die Eigenschaft object-position.

Hier verwenden wir die Eigenschaft object-position, um das Bild so zu positionieren, dass das große alte Gebäude in der Mitte liegt:

Paris

Beispiel

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>


Hier verwenden wir die Eigenschaft object-position, um das Bild so zu positionieren, dass der berühmte Eiffelturm in der Mitte liegt:

Paris

Beispiel

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>



CSS-Objekt-*-Eigenschaften

In der folgenden Tabelle sind die CSS-Objekt-*-Eigenschaften aufgeführt:

object-fit

Gibt an, wie die Größe eines <img> oder <video> geändert werden soll, damit es in seinen Container passt

object-position

Gibt an, wie ein <img> oder <video> mit x/y positioniert werden soll Koordinaten innerhalb einer „eigenen Inhaltsbox“