CSS object-position eigenschap
- Vorige pagina CSS object-fit
- Volgende pagina CSS maskering
CSS object-position de eigenschap wordt gebruikt om de positie van <img> of <video> binnen hun container te specificeren.
afbeelding
Bekijk hieronder het beeld van Wuhan, met een afmeting van 600x400 pixels:
Vervolgens gebruiken we object-fit: cover; om de aspectverhouding te behouden en de opgegeven maat te vullen. Echter, de afbeelding zal worden ingekort om te passen, zoals hieronder te zien is:
Voorbeeld
img {
width: 266px;
height: 400px;
object-fit: cover;
}
het object-position-eigenschap
Stel dat het gedeelte van de afbeelding dat wordt weergegeven niet op de gewenste locatie is. Om de afbeelding te positioneren, zullen we gebruiken object-position eigenschap.
Hier zullen we gebruiken object-position de eigenschap om de afbeelding te positioneren, zodat de oude gebouwen in het midden komen te staan:
Voorbeeld
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Hier zullen we gebruiken object-position Gebruik eigenschappen om de afbeelding te positioneren, zodat de beroemde Zijddakkapel van de Verboden Stad aan de rechterkant wordt geplaatst:
Voorbeeld
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
CSS object-* eigenschappen
De tabel hieronder geeft een overzicht van de CSS object-* eigenschappen:
| Eigenschap | Beschrijving |
|---|---|
| object-fit | Specificeer hoe <img> of <video> moet worden aangepast in grootte om in de container te passen. |
| object-position | Specificeer hoe <img> of <video> moet worden geplaatst binnen zijn 'eigen inhoudsgebied' via x/y-coördinaten. |
- Vorige pagina CSS object-fit
- Volgende pagina CSS maskering
