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

1Gib Bildern max-width: 100% und height: auto.
2Gib width und height im HTML wegen der Layout-Stabilität (CLS) an, begrenze sie aber im CSS.
3Für verschiedene Größen erwäge srcset / <picture>.
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