CSS - Objektpositionseigenschaft
Beispiel
Passen Sie die Größe eines Bildes an seine Inhaltsbox an und positionieren Sie das Bild 5 Pixel von links und 10 % von oben innerhalb der Inhaltsbox:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definition und Verwendung
Die object-position
Eigenschaft wird zusammen mit object-fit verwendet, um anzugeben, wie ein <img> oder <video> mit x/y-Koordinaten innerhalb seiner "eigenen Inhaltsbox" positioniert werden soll.
Standardwert: | 50 % 50 % |
---|---|
Vererbt: | ja |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.objectPosition="0 10%" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS-Syntax
object-position: position|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Verwandte Seiten
CSS-Tutorial: CSS-Objektanpassung
CSS-Referenz: CSS-Objektanpassung
HTML-DOM-Referenz: Die Eigenschaft objectPosition