CSS Object-position
De CSSobject-position eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> binnen de container moet worden geplaatst.
De afbeelding
In dit voorbeeld gebruiken we de onderstaande afbeelding deze hebben we geplaatst met een breedte van 400 pixels en een hoogte van 200 pixels:
Daarna hebben we de afbeelding opgemaakt met de eigenschap
object-fit: cover; omdat deze waarde de afbeelding schaalt om de container te bedekken met behoud van de beeldverhouding.
De object-position eigenschap
Laten we zeggen dat het deel van de afbeelding dat wordt getoond, niet is gepositioneerd zoals we willen. Om de afbeelding te positioneren, gebruiken we deobject-position eigenschap.
In het volgende voorbeeld gaan we de object-position eigenschap gebruiken om de afbeelding te positioneren zodat het witte gebouw links zichtbaar is:
Voorbeeld:
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 1% 100%;
}
Hier gaan we de
object-position eigenschap gebruiken om de afbeelding zo te positioneren dat we de zee kunnen zien.
Voorbeeld:
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 100% 100%;
}
