CSS object-position eigenschap
- vorige pagina object-fit
- volgende pagina offset
Definitie en gebruik
De object-position eigenschap, samen met object-fit, bepaalt hoe x/y-coördinaten worden gebruikt om <img> of <video> in hun "eigen inhoudsbox" te positioneren.
Zie ook:
CSS tutorial:CSS object-fit
CSS referentiemanual:CSS object-position
HTML DOM referentiemanual:objectPosition eigenschap
voorbeeld
Passen de grootte van het beeld aan om in de inhoudsbox te passen, en verplaats het beeld in de inhoudsbox 5px naar links en 10% naar boven:
img.a {
breedte: 200px;
hoogte: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solide rood;
}
CSS syntaxis
object-position: positie|initial|inherit;
eigenschapswaarde
| waarde | beschrijving |
|---|---|
| positie |
Bepaalt de positie van het beeld of de video in de inhoudsbox. De eerste waarde bestuurt de x-as, de tweede waarde bestuurt de y-as. Kan een string (links, midden of rechts) of een getal (in px of %) zijn. Negatieve waarden zijn toegestaan. |
| initial | Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial. |
| inherit | Deze eigenschap van de ouderweergave element overnemen. Raadpleeg inherit. |
technische details
| standaardwaarde: | 50% 50% |
|---|---|
| inheritance: | ja |
| animatiegemaakt door: | ondersteund. Raadpleeg:animatiegerelateerde eigenschappen. |
| versie: | CSS3 |
| JavaScript syntaxis: | object.style.objectPosition="0 10%" |
browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- vorige pagina object-fit
- volgende pagina offset
