Vi vet att bilder spelar en avgörande roll på en webbsida. De hjälper till att visa innehållet effektivt och tydligt. Ibland kan innehållsbilden ha en storlek som är antingen större eller mindre än den behållare där den ska visas, eller så kan dess bildförhållande skilja sig från behållarens. Vi kommer att titta på hur man visar en bild på bästa sätt.

object-fit

object-fit anger hur en bild ska skalas för att passa sin behållare.

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

• fill: sträcker ut bilden för att fylla behållaren, utan att ta hänsyn till bildförhållandet (kan förvränga bilden);
• contain: skalar bilden så att den passar inuti behållaren och behåller bildförhållandet (kan lämna tomma ytor);
• cover: fyller behållaren helt och hållet och behåller bildförhållandet (kan beskära bilden);
• none: använder bildens ursprungliga storlek; den kan flöda utanför behållaren;
• scale-down: använder det mindre av none eller contain (antingen ursprunglig storlek eller nerskalad för att passa).

object-position

object-position anger bildens position inuti dess behållare. Den accepterar två värden: ett horisontellt värde och ett vertikalt värde, eller så kan reserverade ord användas.

object-position: x y;