object-fit
eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> moet worden aangepast zodat deze in de container past.
object-fit
kun je aangeven hoe een afbeelding in de container moet passen met behoud van de beeldverhouding. Kijk naar de onderstaande afbeelding het heeft een breedte van 400 pixels en een hoogte van 200 pixels:
We zien dat de afbeelding wordt samengedrukt om in de container van 200x200 pixels te passen terwijl de werkelijke grootte 400x200 pixels is. We kunnen de eigenschap object-fit
gebruiken om te bepalen hoe de afbeelding zich gedraagt binnen de opgegeven afmetingen.
object-fit
kun je de volgende waarden toepassen:
fill |
- | Dit is de standaard waarde deze rekt de afbeelding uit of knijpt hem samen om precies in de container te passen. |
contain |
- | Deze waarde schaalt de afbeelding om binnen de container te passen zonder bijsnijden, waardoor de beeldverhouding behouden blijft. Het zorgt ervoor dat de hele afbeelding zichtbaar is binnen de container. |
cover |
- | Deze waarde schaalt de afbeelding om de container te bedekken met behoud van de beeldverhouding. |
none |
- | Deze waarde past geen schalen of bijsnijden toe en de afbeelding behoudt zijn oorspronkelijke grootte. |
scale-down |
- | De afbeelding wordt verkleind. |
object-fit
eigenschap met de waarde cover:
object-fit
met de waarde contain gebruiken dan wordt de afbeelding geschaalt om binnen de container te passen zonder bijsnijden, waardoor de beeldverhouding behouden blijft. Het zorgt ervoor dat de hele afbeelding zichtbaar is binnen de container.
object-fit
met de waarde fill gebruiken dan wordt de afbeelding uitgerekt of wordt het samen geknepen zodat het precies in de container past.
![]() |
De eigenschap object-fit met de waarde fill is de standaard waarde. |
object-fit
met de waarde none past geen schalen of bijsnijden toe en de afbeelding behoudt zijn oorspronkelijke grootte.
object-fit
met de waarde scale-down wordt gebruikt om de afbeelding te verkleinen.
![]() |
Ad blocker gedetecteerd! |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |