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, oavsett dess bildförhållande. Detta kan leda till att bilden beskärs eller förvrängs;
• contain skalar bilden för att passa behållaren och bevarar dess bildförhållande. Detta kan resultera i tomt utrymme runt bilden om behållaren och bilden har olika bildförhållanden;
• cover skalar bilden för att helt täcka behållaren och bevarar dess bildförhållande;
• none visar bilden i dess ursprungliga storlek, oavsett behållarens storlek. Detta kan göra att bilden flödar utanför behållaren;
• scale-down skalar ner bilden för att passa behållaren om den är större än bildens naturliga storlek, eller visar bilden i dess naturliga storlek om den får plats i behållaren.

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;