CSS object-position Eigenschaft
Mit der CSS-Eigenschaft object-position legen Sie die Position eines Elements in seinem Container fest. Werte und Beispiele.
Die CSS-Eigenschaft object-position legt fest, wie ein ersetztes Element — beispielsweise ein <img> oder <video> — innerhalb seiner eigenen Box positioniert wird. Ein ersetztes Element ist ein Element, dessen Inhalt aus einer externen Quelle stammt und nicht von CSS erzeugt wird; der Browser entscheidet, wie dieser Inhalt in den verfügbaren Platz der Box eingepasst wird.
Allein hat object-position keine sichtbare Wirkung, solange die intrinsische Größe des Elements mit der Boxgröße übereinstimmt. Diesen Unterschied erzeugt die Eigenschaft object-fit: Sobald object-fit den Inhalt skaliert oder beschneidet (beispielsweise mit cover oder contain), entscheidet object-position, welcher Teil des Inhalts sichtbar bleibt. Stellen Sie sich die Box als Fenster und das Bild als ein größeres Bild dahinter vor — object-position verschiebt das Bild, sodass ein anderer Bereich sichtbar wird.
Der Wert besteht aus einer oder zwei Koordinaten: Die erste steuert die x-Achse (horizontal), die zweite die y-Achse (vertikal). Wird nur ein Wert angegeben, wird für die zweite Achse automatisch center verwendet.
/* keyword pairs */
object-position: left top;
object-position: right bottom;
/* lengths and percentages */
object-position: 10px 20%;
object-position: 50% 50%; /* the default — centered */Jede Koordinate kann ein Schlüsselwort (left, right, top, bottom, center), eine Länge (px, em, …) oder ein Prozentwert sein. Bei 0% wird die entsprechende Kante des Inhalts an derselben Kante der Box ausgerichtet; bei 100% werden die gegenüberliegenden Kanten ausgerichtet.
Negative Werte sind zulässig — object-position: -20px 0; schiebt den Inhalt über den linken Rand der Box hinaus und blendet diesen Streifen aus.
| Anfangswert | 50% 50% |
|---|---|
| Gilt für | Ersetzte Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Das Bild ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.objectPosition = "20% 0%"; |
Syntax
object-position: <position> | initial | inherit;Beispiele
Beispiel mit der Standardposition (50% 50%)
Der Standardwert zentriert den Inhalt. Da object-fit: cover das Bild so beschneidet, dass es die Box füllt, bleibt durch die Zentrierung die Mitte des Bildes sichtbar.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</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>Ergebnis
Beispiel mit dem Schlüsselwort left
Mit left wird die horizontale Achse an den linken Rand der Box ausgerichtet (die vertikale Achse hat standardmäßig den Wert center), sodass die linke Seite des beschnittenen Bildes sichtbar bleibt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</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>Beispiel mit einer Länge und einem Prozentwert (10px 20%)
Sie können die Einheiten der beiden Achsen kombinieren. Hier ist der Inhalt um 10px von links versetzt und 20% von oben in der Box positioniert.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</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 ersetzten Elements innerhalb seiner Box an. Kann ein Schlüsselwort (top, bottom, left, right, center) oder eine Kombination aus Schlüsselwörtern, Prozentwerten oder Längen sein. |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Wann sinnvoll einsetzen
object-position ist besonders nützlich beim responsiven Zuschneiden von Bildern. Wenn ein Foto einen Container mit fester Größe (ein Karten-Vorschaubild, ein Hero-Banner, ein Avatar) mit object-fit: cover füllen muss, beschneidet der Browser alles, was nicht passt. Standardmäßig wird gleichmäßig von der Mitte aus beschnitten, was den wichtigen Teil eines Fotos abschneiden kann — zum Beispiel das Gesicht einer Person oben im Bild. Mit object-position: center top bleibt dieser Bereich stattdessen sichtbar.
Ein paar Dinge, die man sich merken sollte:
- Die Eigenschaft wirkt nur auf ersetzte Elemente (
<img>,<video>,<input type="image">, manchmal<object>). Auf ein<div>hat sie keinen Effekt. - Sie wird zusammen mit object-fit verwendet:
object-fitentscheidet, wie der Inhalt skaliert oder beschnitten wird, undobject-positionbestimmt, wo das sichtbare Fenster liegt. - Die Syntax entspricht der Eigenschaft background-position, sodass dieselben Schlüsselwort- und Prozentregeln gelten.