Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut.

Zum Inhalt springen
SEO Tools
Hilfe und Dokumentation
UX / UI Mittlere Auswirkung Einfach 10–20 Min.

Responsive Bilder

Bilder müssen ohne horizontales Scrollen auf das Handy passen.

Was es ist

Ein Bild mit fester großer Breite (z. B. width="1200") kann auf einem schmalen Handy über den Bildschirm hinauslaufen und horizontales Scrollen der gesamten Seite verursachen.

Warum es wichtig ist

Horizontales Scrollen ist eines der nervigsten UX-Probleme auf dem Handy — es zerbricht das Layout und wirkt unfertig. Mit einer einzigen Regel im CSS lässt es sich leicht vermeiden.

So geht's

  1. 1Gib Bildern max-width: 100% und height: auto.
  2. 2Gib width und height im HTML wegen der Layout-Stabilität (CLS) an, begrenze sie aber im CSS.
  3. 3Für verschiedene Größen erwäge srcset / <picture>.
  4. 4Teste bei schmaler Breite (~360px), ob sich nichts horizontal verschiebt.

Beispiel

Richtig
img { max-width: 100%; height: auto; }

Fazit

Eine einzige Regel (max-width:100%; height:auto) löst die meisten Überläufe von Bildern auf dem Handy. Ergänze die Abmessungen im HTML wegen CLS und erwäge bei großen Visuals srcset. Eine schnelle Korrektur eines häufigen Mobil-Übels.

Verwandte Themen