Arbejde med Billeder i CSS

Vi ved, at billeder spiller en afgørende rolle på en webside. De hjælper med at præsentere indholdet effektivt og tydeligt. Nogle gange kan billedets størrelse være enten større eller mindre end den container, det skal vises i, eller dets billedformat kan være anderledes end containerens. Vi vil se på, hvordan et billede vises bedst muligt.

object-fit

object-fit angiver, hvordan et billede skal tilpasses størrelsen på sin container.

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

• fill: strækker billedet, så det fylder hele containeren, uden hensyn til billedformat (kan forvride billedet);
• contain: skalerer billedet, så det passer inden for containeren og bevarer billedformatet (kan efterlade tom plads);
• cover: fylder containeren helt ud og bevarer billedformatet (kan beskære billedet);
• none: bruger billedets oprindelige størrelse; det kan overløbe containeren;
• scale-down: bruger den mindste af none eller contain (enten oprindelig størrelse eller skaleret ned for at passe).

object-position

object-position angiver billedets placering inde i dets container. Den accepterer to værdier: en horisontal værdi og en vertikal værdi, eller man kan bruge reserverede ord.

object-position: x y;