CSS De eigenschap object-positie
De CSS object-position-eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> binnen zijn container moet worden geplaatst.
De afbeelding
Kijk naar de volgende afbeelding uit Parijs, die 400x300 pixels is:
Vervolgens gebruiken we object-fit: cover;om de beeldverhouding te behouden en de gegeven dimensie te vullen. De afbeelding wordt echter zo geknipt dat deze past:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
}
De eigenschap object-positie gebruiken
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 de object-positioneigenschap.
Hier zullen we de object-positioneigenschap gebruiken om de afbeelding zo te positioneren dat het grote oude gebouw in het midden staat:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Hier zullen we de object-positioneigenschap gebruiken om de afbeelding zo te positioneren dat de beroemde Eiffeltoren in het midden staat:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS-object-* Eigenschappen
De volgende tabel bevat de CSS-object-*-eigenschappen:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |