Vi ved, at billeder spiller en afgørende rolle på en webside. De hjælper med at vise indholdet effektivt og tydeligt. Nogle gange kan indholdsbilledet have en størrelse, der enten er større eller mindre end den container, det er tiltænkt at blive vist i, eller dets billedformat kan være anderledes end containerens. Vi vil overveje, hvordan man viser et billede på den bedst mulige måde.

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, 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;