§ 17

Billedets sideforhold og reserveret højde

Hvor høj bliver boksen, og hvad skal stå i aspect-ratio?

Svar: Når et billede indlæses uden at browseren kender dets højde, hopper teksten nedenunder. Det tæller i CLS. Løsningen er at give img width og height eller sætte aspect-ratio, så pladsen er reserveret. Indtast billedets naturlige mål og den bredde, det vises i, og få højden, sideforholdet og den gamle padding-top-procent.

Formel

Højde = visningsbredde × naturlig højde ÷ naturlig bredde

aspect-ratio: bredde / højde, fx aspect-ratio: 1600 / 900

Den gamle teknik: padding-top = højde ÷ bredde × 100 % på en boks med position: relative

Symboler og enheder i formlen
Symbol	Betydning	Enhed
orig_b	Billedets naturlige bredde	px
orig_h	Billedets naturlige højde	px
vis_b	Visningsbredde i CSS	px
=	Reserveret højde ved visningsbredden	px
=	Sideforhold (bredde ÷ højde)
=	padding-top til den gamle teknik	%

Gyldighed og kilde

Kilde: web.dev «Optimize CLS» + MDN aspect-ratio (CSS Box Sizing 4)

Gælder ikke når

Moderne browsere regner selv sideforholdet ud fra img's width- og height-attributter, så de to tal er det vigtigste. Beskæres billedet med object-fit: cover, gælder boksens forhold og ikke billedets.

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

Billedets naturlige bredde1.600 px
Billedets naturlige højde900 px
Visningsbredde i CSS343 px

Giver

Reserveret højde ved visningsbredden192,9 px
Sideforhold (bredde ÷ højde)1,7778
padding-top til den gamle teknik56,250 %

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

Sådan bruger du den

Billeder uden kendt højde får teksten til at hoppe, når de indlæses, og det koster i CLS. Med width og height på img eller aspect-ratio i CSS reserverer browseren pladsen fra starten. Beregneren viser højden ved din visningsbredde og de tal, der skal i CSS'en.

Trin for trin

Find billedets naturlige bredde og højde i filen eller fra CMS'et.
Skriv dem som width og height på img. Så regner browseren selv forholdet.
Til et kort med object-fit eller et baggrundsbillede: sæt aspect-ratio: bredde / højde på boksen.
Højden ved en given bredde er bredden gange højde delt med bredde.

Typiske fejl

At skrive width og height med CSS-størrelsen i stedet for billedets naturlige mål. Det er forholdet, der tæller.
At sætte height: auto uden width og height på img. Så kender browseren ikke forholdet før billedet er hentet.
At blande billeder med forskellige forhold i et grid uden en fast aspect-ratio på kortet.

Eksempler fra hverdagen

Hero på en telefon

En restaurants hero-billede er 1600 × 900 px og vises 343 px bredt på en iPhone.

Billedets naturlige bredde: 1.600 px
Billedets naturlige højde: 900 px
Visningsbredde i CSS: 343 px

Det betyder: Browseren skal reservere 192,9 px i højden. Sideforholdet er 1,7778 (16 : 9), og den gamle padding-top-teknik ville bruge 56,25 %.

Produktbillede på højkant

En tøjbutiks produktbilleder er 1200 × 1500 px og vises 280 px brede i et grid.

Billedets naturlige bredde: 1.200 px
Billedets naturlige højde: 1.500 px
Visningsbredde i CSS: 280 px

Det betyder: Hvert kort skal have 350 px højde til billedet. Sideforholdet er 0,8, altså 4 : 5, og padding-top ville være 125 %.

Tommelfingerregel

16 : 9 giver en højde på ca. 0,56 gange bredden, 4 : 3 ca. 0,75 og 4 : 5 hele 1,25.

Sådan tjekker du svaret

Kør Lighthouse eller se Layout Shift i DevTools. Billedet må ikke stå som årsag til et skift.