Arbeta med bilder i CSS

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 undersöka hur en bild kan visas på bästa sätt.

object-fit

object-fit anger hur en bild ska ändras i storlek 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 får plats i behållaren och behåller bildförhållandet (kan lämna tomma ytor);
• cover: fyller behållaren helt och behåller bildförhållandet (kan beskära bilden);
• none: använder bildens ursprungliga storlek; kan göra att bilden flödar 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;