§ 17

Bildseitenverhältnis und reservierte Höhe

Wie hoch wird die Box, und welche Bildverhältnis sollte darin stehen?

Antwort: Wenn ein Bild ohne Kenntnisse der Höhe im Browser geladen wird, springt der Text darunter. Das zählt in CLS. Die Lösung ist, img width und height zu geben oder aspect-ratio einzustellen, damit der Platz reserviert ist. Gib die natürlichen Abmessungen des Bildes und die Breite ein, auf der es angezeigt wird, und bekomme die Höhe, das Seitenverhältnis und den alten padding-top-Prozentsatz.

Formel

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

aspect-ratio: Breite / Höhe, z.B. aspect-ratio: 1600 / 900

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

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
orig_b	Natürliche Bildbreite	px
orig_h	Natürliche Bildhöhe	px
vis_b	Anzeigebreite in CSS	px
=	Reservierte Höhe bei der Anzeigebreite	px
=	Seitenverhältnis (Breite ÷ Höhe)
=	Polsterung oben zur alten Technik	%

Gültigkeit und Quelle

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

Gilt nicht, wenn

Moderne Browser berechnen das Seitenverhältnis aus den width- und height-Attributen des img selbst, daher sind die beiden Zahlen das Wichtigste. Wird das Bild mit object-fit: cover beschnitten, gilt das Verhältnis der Box und nicht des Bildes.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Natürliche Bildbreite1.600 px
Natürliche Bildhöhe900 px
Anzeigebreite in CSS343 px

Geber

Reservierte Höhe bei der Anzeigebreite192,9 px
Seitenverhältnis (Breite ÷ Höhe)1,7778
Polsterung oben zur alten Technik56,250 %

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

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.

Schritt für Schritt

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.

Typische Fehler

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.

Beispiele aus dem Alltag

Hero på en telefon

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

Natürliche Bildbreite: 1.600 px
Natürliche Bildhöhe: 900 px
Anzeigebreite in CSS: 343 px

Es bedeutet: 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.

Natürliche Bildbreite: 1.200 px
Natürliche Bildhöhe: 1.500 px
Anzeigebreite in CSS: 280 px

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

Faustregel

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

So überprüfst du die Antwort

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