CSS Die Objektpositionseigenschaft
Die CSS object-position-Eigenschaft wird verwendet, um anzugeben, wie ein <img> oder <video> in seinem Container positioniert werden soll.
Das Bild
Sehen Sie sich das folgende Bild aus Paris an, das 400 x 300 Pixel groß ist:
Als nächstes verwenden wir object-fit: cover;, um das Seitenverhältnis beizubehalten und die angegebene Dimension zu füllen. Das Bild wird jedoch so beschnitten, dass es passt:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Verwenden der Objektpositionseigenschaft
Nehmen wir an, dass der angezeigte Teil des Bildes nicht wie gewünscht positioniert ist. Um das Bild zu positionieren, verwenden wir die object-positionEigenschaft.
Hier verwenden wir die object-positionEigenschaft, um das Bild so zu positionieren, dass das große alte Gebäude im Mittelpunkt steht:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Hier verwenden wir die object-positionEigenschaft, um das Bild so zu positionieren, dass der berühmte Eiffelturm in der Mitte steht:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS-Objekt-* Eigenschaften
Die folgende Tabelle listet die CSS-Objekt-*-Eigenschaften auf:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |