Over CSS object-fit

Op deze pagina zie je een aantal malen dezelfde foto, met steeds dezelfde afmetingen, maar anders in de rechthoek geplaatst. Dat doe je met de CSS-eigenschap object-fit. Hier wordt getoond hoe dat werkt.

Met object-fit bepaal je hoe een <img> of <video> moet woren verschaald naar de daarvoor gereserveerde ruimte, zoals: "bewaar de beeldverhouding" of "uitrekken en zoveel mogelijk ruimte innemen".

Het gaat om deze foto. Die is 250px breed en 187px hoog.

De foto wordt ingepast in een rechthoek van 200px breed en 300px hoog. De beeldverhouding van de foto is 4:3, van de rechthoek is dat 2:3.

Met object-fit kun je nauwkeurig sturen hoe de afbeelding wordt weergegeven. Daarvoor heeft object-fit een aantal keywords, die hieronder worden besproken.

Waarde	Betekenis
fill	Dit is de default-instelling. De afbeelding wordt uitgerekt of in elkaar gedrukt zodat die binnen de opgegeven afmetingen valt. De beeldverhouding kan veranderen.
contain	De afbeelding behoudt zijn beeldverhouding, maar wordt vergroot of verkleind zodat die geheel binnen de opgegeven afmetingen valt.
cover	De afbeelding bedekt de rechthoek, maar behoudt zijn beeldverhouding. Het middelpunt van de foto staat in het middelpunt van de rechthoek. Uitstekende delen (links en rechts of boven en onder) worden weggeknipt.
none	De afbeelding wordt niet aangepast. Uitstekende delen worden weggeknipt.
scale-down	De afbeelding wordt geschaald naar de kleinste versie van none of contain.

De code van het voorbeeld
 
De HTML voor de foto's is:
 
<img class="xxxx" src="foto.jpg"
      style="width:200px; height:300px; border:0">
 
Hierin verwijst class="xxxx" naar onderstaande CSS:
 
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.scale-down { object-fit: scale-down; }
.none { object-fit: none; }