§ 17

Image aspect ratio and reserved height

How high will the box be, and what should the aspect ratio be?

Answer: When an image loads without the browser knowing its height, text below jumps. That counts in CLS. The solution is to give img width and height or set aspect-ratio so space is reserved. Enter the image's natural size and the width it's shown in, and get the height, aspect ratio and the old padding-top percentage.

Formula

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

aspect-ratio: width / height, e.g. aspect-ratio: 1600 / 900

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

Symbols and units in the formula
Symbol	Meaning	Unit
orig_b	Image's natural width	px
orig_h	Image's natural height	px
vis_b	Display width in CSS	px
=	Reserved height at viewing width	px
=	Aspect ratio (width ÷ height)
=	padding-top for the old technique	%

Validity and source

Source: web.dev 'Optimise CLS' + MDN aspect-ratio (CSS Box Sizing 4)

Does not apply when

Modern browsers calculate the aspect ratio from img's width and height attributes, so the two numbers are the most important. If the image is cropped with object-fit: cover, the box's ratio applies, not the image's.

Worked example

The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.

Substituted

Image's natural width1,600 px
Image's natural height900 px
Display width in CSS343 px

Giver

Reserved height at viewing width192.9 px
Aspect ratio (width ÷ height)1.7778
padding-top for the old technique56.250 %

Members only

The calculator itself is locked

Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.

Create free user →Log in

Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.

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.

Step by step

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.

Typical errors

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.

Examples from everyday life

Hero på en telefon

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

Image's natural width: 1,600 px
Image's natural height: 900 px
Display width in CSS: 343 px

It means: 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.

Image's natural width: 1,200 px
Image's natural height: 1,500 px
Display width in CSS: 280 px

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

Rule of thumb

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

How to check the answer

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