CSS object-position Eigenschaft
- Vorherige Seite object-fit
- Nächste Seite Offset
Definition und Verwendung
Die object-position-Eigenschaft kann zusammen mit object-fit verwendet werden, um festzulegen, wie x/y-Koordinaten für <img> oder <video> in ihrem "eigenen Inhaltselframe" verwendet werden sollen.
Weitere Informationen:
CSS-Tutorial:CSS object-fit
CSS Referenzhandbuch:CSS object-position
HTML DOM Referenzhandbuch:objectPosition-Eigenschaft
Beispiel
Passen Sie die Größe des Bildes an, damit es in den Inhaltselframe passt, und bewegen Sie das Bild in der Inhaltselframe 5px nach links und 10% nach oben:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solide rot;
}
CSS-Syntax
object-position: position|initial|inherit;
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| position |
Legt die Position des Bildes oder Videos im Inhaltselframe fest. Der erste Wert steuert die x-Achse, der zweite Wert die y-Achse. Es kann ein String (links, zentriert oder rechts) oder eine Zahl (in px oder %) sein. Negative Werte sind erlaubt. |
| initial | Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial. |
| inherit | Diese Eigenschaft von ihrem übergeordneten Element übernehmen. Siehe inherit. |
Technische Details
| Standardwert: | 50% 50% |
|---|---|
| Vererbung: | Ja |
| Animation herstellen: | Unterstützt. Siehe:Animationsspezifische Eigenschaften. |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.objectPosition="0 10%" |
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- Vorherige Seite object-fit
- Nächste Seite Offset
