CSS Object-fit

De CSS object-fit eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> moet worden aangepast zodat deze in de container past.

De CSS object-fit eigenschap

Met de eigenschap 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:

Strand

Hetzelfde afbeelding hebben we hieronder opgemaakt met CSS en de breedte aangepast tot 200 pixels en hebben we de zelfde hoogte van 200 pixels aahgehouden:

Strand

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.

CSS object-fit waarden

Voor de CSS eigenschap 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.

CSS object-fit: cover;

Deze waarde schaalt de afbeelding om de container te bedekken met behoud van de beeldverhouding. Zie het volgende voorbeeld dat gebruik maakt van de object-fit eigenschap met de waarde cover:

Strand

Voorbeeld:

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

Uitproberen

CSS object-fit: contain;

Als we de eigenschap 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.

Strand

Voorbeeld:

img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

Uitproberen

CSS object-fit: fill;

Als we de eigenschap object-fit met de waarde fill gebruiken dan wordt de afbeelding uitgerekt of wordt het samen geknepen zodat het precies in de container past.

Strand

Voorbeeld:

img {
  width: 200px;
  height: 200px;
  object-fit: fill;
}

Uitproberen

De eigenschap object-fit met de waarde fill is de standaard waarde.

CSS object-fit: none;

De eigenschap object-fit met de waarde none past geen schalen of bijsnijden toe en de afbeelding behoudt zijn oorspronkelijke grootte.

Strand

Voorbeeld:

img {
  width: 200px;
  height: 200px;
  object-fit: none;
}

Uitproberen

CSS object-fit: scale-down;

De eigenschap object-fit met de waarde scale-down wordt gebruikt om de afbeelding te verkleinen.

Strand

Voorbeeld:

img {
  width: 200px;
  height: 200px;
  object-fit: scale-down;
}

Uitproberen

Vorige Volgende

	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.