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