Die CSS-Eigenschaft object-position
wird verwendet, um anzugeben, wie ein <img> oder <video> positioniert werden soll in seinem Behälter.
Schauen Sie sich das folgende Bild aus Paris an, das 400 x 300 Pixel groß ist:
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:
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>
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:
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:
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>
In der folgenden Tabelle sind die CSS-Objekt-*-Eigenschaften aufgeführt:
Gibt an, wie die Größe eines <img> oder <video> geändert werden soll, damit es in seinen Container passt
Gibt an, wie ein <img> oder <video> mit x/y positioniert werden soll Koordinaten innerhalb einer „eigenen Inhaltsbox“