CSS object-fit eigenschap

Definitie en gebruik

De objectFit-eigenschap wordt gebruikt om aan te geven hoe de grootte van <img> of <video> aangepast moet worden om de container te passen.

Deze eigenschap geeft aan hoe de inhoud opgevuld moet worden in de container. Bijvoorbeeld 'behoud de verhouding' of 'uitbreiden en zoveel mogelijk ruimte innemen'.

Zie ook:

CSS handleiding:CSS object-fit

CSS referentiemanual:CSS object-position

HTML DOM referentiemanual:objectFit-eigenschap

Voorbeeld

Knip de kanten van het beeld af, behoud de verhouding van de breedte en hoogte en vul de ruimte in:

img.a {
  breedte: 200px;
  hoogte: 400px;
  object-fit: cover;
}

Probeer het zelf uit

CSS-syntaxis

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
fill Standaardwaarde. Pas de grootte van de vervanging aan om het inhoudsframe van het element te vullen. Indien nodig wordt het object uitgerekt of samengeperst.
contain Schaal de vervanging in om de verhouding van de breedte en hoogte te behouden, terwijl het past in het inhoudsframe van het element.
cover Passen de grootte van de vervanging aan om de verhouding van de hele inhoudsrand van het element te behouden. Het object wordt ingekort.
none De vervanging van de inhoud wordt niet aangepast aan de grootte.
scale-down De afmetingen van de inhoud zijn gelijk aan none of contain, afhankelijk van wie van de twee de kleinste objectafmetingen krijgt.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Inherit deze eigenschap van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: Raadpleeg aparte eigenschappen.
Inherits: Nee
Animatiegemaakt: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript-syntaxis: object.style.objectFit="cover"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0