Eigenschap CSS - objectpositie
Voorbeeld
Pas het formaat van een afbeelding aan zodat deze in het inhoudsvak past en plaats de afbeelding 5px vanaf de linkerkant en 10% vanaf de bovenkant in het inhoudsvak:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definitie en gebruik
De object-position
eigenschap wordt samen met object-fit gebruikt om te specificeren hoe een <img> of <video> moet worden gepositioneerd met x/y-coördinaten in zijn "eigen inhoudsvak".
Standaardwaarde: | 50% 50% |
---|---|
geërfd: | Ja |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.objectPosition="0 10%" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS-syntaxis
object-position: position|initial|inherit;
Eigendomswaarden
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 |
Gerelateerde pagina's
CSS-zelfstudie: CSS-object-fit
CSS-referentie: CSS-object-fit
HTML DOM-referentie: de eigenschap objectPosition