De eigenschap object-fit
De eigenschap object-fit bepaalt
de beeldverhouding of schaling
van elementen zoals een afbeelding
of video.
Syntaxis
selector {
object-fit: fill of contain of cover of none;
}
In de tabel staan de belangrijkste waarden voor
de eigenschap object-fit:
Waarden
| Waarde | Beschrijving |
|---|---|
fill |
Het element wordt geschaald om te passen binnen de opgegeven afmetingen, waarbij de verhoudingen van het element worden genegeerd. |
contain |
Het element wordt geschaald om te passen binnen de opgegeven afmetingen, waarbij de verhoudingen van het element behouden blijven. |
cover |
De afmetingen van het element worden aangepast om het opgegeven gebied volledig te vullen, waarbij de verhoudingen van het element zelf behouden blijven. |
none |
De oorspronkelijke afmetingen van het element blijven behouden. |
Voorbeeld
Laten we onze afbeelding de opgegeven afmeting laten vullen zonder de verhoudingen te behouden:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we nu de afbeelding het opgegeven container volledig laten vullen met behoud van de verhoudingen:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we onze afbeelding het opgegeven container laten vullen, zodat de grootte van de afbeelding zelf verandert, maar de verhoudingen ervan behouden blijven:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we onze afbeelding eenvoudig in de opgegeven container plaatsen met behoud van de oorspronkelijke afmetingen:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Zie ook
-
de eigenschap
aspect-ratio,
die de beeldverhouding van een element bepaalt