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 getoond moet worden, of de beeldverhouding wijkt af van die van de container. We zullen bekijken hoe een afbeelding op de beste manier weergegeven kan worden.

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 volledig te vullen, ongeacht de beeldverhouding. Dit kan ertoe leiden dat de afbeelding wordt bijgesneden of vervormd;
• contain schaalt de afbeelding zodat deze in de container past met behoud van de beeldverhouding. Dit kan resulteren in lege ruimte rondom de afbeelding als de container en afbeelding verschillende beeldverhoudingen hebben;
• cover schaalt de afbeelding zodat deze de container volledig bedekt met behoud van de beeldverhouding;
• none toont de afbeelding op originele grootte, ongeacht de grootte van de container. Dit kan ertoe leiden dat de afbeelding buiten de container valt;
• scale-down schaalt de afbeelding naar beneden om in de container te passen als deze groter is dan de natuurlijke grootte van de afbeelding, of toont de afbeelding op natuurlijke grootte als deze binnen de container past.

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;