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 enten være større eller mindre end den container, det skal vises i, eller dets billedformat kan afvige fra containerens. Vi vil overveje, hvordan et billede vises bedst muligt.

object-fit

object-fit angiver, hvordan et billede skal tilpasses for at passe ind i sin container.

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

• fill strækker billedet, så det fylder hele containeren, uanset billedformat. Dette kan medføre, at billedet beskæres eller forvrænges;
• contain skalerer billedet, så det passer ind i containeren, mens billedformatet bevares. Dette kan resultere i tom plads omkring billedet, hvis containeren og billedet har forskellige billedformater;
• cover skalerer billedet, så det dækker hele containeren, mens billedformatet bevares;
• none viser billedet i dets oprindelige størrelse, uanset containerens størrelse. Dette kan medføre, at billedet flyder ud over containeren;
• scale-down skalerer billedet ned, så det passer i containeren, hvis det er større end billedets naturlige størrelse, eller viser billedet i dets naturlige størrelse, hvis det passer i containeren.

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 vi kan bruge reserverede ord.

object-position: x y;