We weten dat afbeeldingen een cruciale rol spelen op een webpagina. Ze helpen om de inhoud effectief en duidelijk weer te geven. Soms heeft de afbeeldingsinhoud een formaat dat groter of kleiner is dan de container waarin deze moet worden weergegeven, of de beeldverhouding wijkt af van die van de container. We zullen bekijken hoe een afbeelding op de beste manier kan worden weergegeven.

object-fit

object-fit specificeert hoe een afbeelding moet worden geschaald om in de container te passen.

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

• fill: rekt de afbeelding uit om de container te vullen, zonder rekening te houden met de beeldverhouding (kan vervormen);
• contain: schaalt de afbeelding zodat deze binnen de container past met behoud van de beeldverhouding (kan lege ruimte achterlaten);
• cover: vult de container volledig met behoud van de beeldverhouding (kan bijsnijden);
• none: gebruikt het originele formaat van de afbeelding; kan buiten de container vallen;
• scale-down: gebruikt de kleinere van none of contain (ofwel originele grootte of verkleind om te passen).

object-position

object-position specificeert de positie van de afbeelding binnen zijn container. Het accepteert twee waarden: een horizontale waarde en een verticale waarde, of we kunnen gereserveerde woorden gebruiken.

object-position: x y;