CSS-Eigenschaft object-position
Die Eigenschaft object-position wird zusammen mit der Eigenschaft object-fit verwendet, um festzulegen, wie der Inhaltsbereich eines ersetzten Elements innerhalb seines Innenabstandsbereichs mithilfe von x/y-Koordinaten positioniert werden soll. Der erste Wert steuert die x-Achse und der zweite Wert die y-Achse.
Diese Eigenschaft kann durch ein Schlüsselwort (left, center, right, top oder bottom) oder eine Zahl (in px oder %) angegeben werden.
INFO
Negative Werte sind gültig.
| Anfangswert | 50% 50% |
|---|---|
| Gilt für | Ersetzte Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. Das Bild ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.objectPosition = "20% 0%"; |
Syntax
CSS object-position syntax
css
object-position: <position> | initial | inherit;Beispiel für die Eigenschaft object-position:
CSS object-position code example
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Ergebnis
Beispiel für die Eigenschaft object-position, angegeben als "left":
CSS object-position left example
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: left</h3>
<img class="tree" src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Beispiel für die Eigenschaft object-position, angegeben in "px" und "%":
CSS object-position with number example
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="https://de.w3docs.com/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 seines Kastens 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. |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What does the 'object-position' property in CSS do?