Stijl objectFit eigenschap

Definitie en gebruik

objectFit Eigenschap gebruikt om aan te geven hoe de grootte van <img> of <video> moet worden aangepast om te passen in de container.

Deze eigenschap vertelt hoe de inhoud op verschillende manieren de container moet vullen; bijvoorbeeld 'behoud de aspectverhouding' of 'strek uit en neem zoveel mogelijk ruimte in'.

Zie ook:

CSS TutorialCSS object-fit

CSS ReferentiemanualDe eigenschap object-fit

Voorbeeld

Knip de zijkanten van het beeld af, behoud de aspectverhouding en vul het gebied op:

document.getElementById("myImg").style.objectFit = "cover";

Probeer het zelf uit

Syntaxis

Retourneer de eigenschap objectFit:

object.style.objectFit

Stel de eigenschap objectFit in:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Eigenschapswaarde

Waarde Beschrijving
fill Standaard. Pas de grootte van de vervanging aan om het inhoudsframe van het element te vullen. Indien nodig wordt het object uitgerekt of samengeperst.
contain Zoom de vervanging in om de aspectverhouding te behouden, terwijl hij past in het inhoudsframe van het element.
cover Pas de grootte van de vervanging aan om de aspectverhouding van de invullement te behouden, terwijl hij past in het inhoudsframe van het element. Het object wordt afgesneden.
none De vervanging van de inhoud past niet aan de grootte aan.
scale-down De afmetingen van de inhoud zijn gelijk aan die van none of contain, afhankelijk van wie van de twee de kleinste objectafmetingen krijgt.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Inheritere deze eigenschap van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: fill
Retourwaarde: Een string die de afmetingen van het element De eigenschap object-fit.
CSS versie: CSS3

Browserondersteuning

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

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