UX / UI Gemiddelde impact Makkelijk 10–20 minuten

Responsieve afbeeldingen

Afbeeldingen moeten op mobiel passen zonder horizontaal te scrollen.

Wat het is

Een afbeelding met een vaste grote breedte (bijvoorbeeld breedte = "1200") kan op een smalle mobiel buiten het scherm overlopen en horizontaal scrollen over de hele pagina veroorzaken.

Waarom het belangrijk is

Horizontaal scrollen is een van de meest vervelende UX-problemen op mobiel: het verbreekt de lay-out en ziet er onafgemaakt uit. Het kan eenvoudig worden voorkomen met één enkele CSS-regel.

Hoe je het doet

1Geef afbeeldingen maximale breedte: 100% en hoogte: automatisch.
2Specificeer breedte en hoogte in de HTML voor lay-outstabiliteit (CLS), maar beperk ze in CSS.
3Voor verschillende formaten kunt u srcset / <picture> overwegen.
4Test op een smalle breedte (~360px) om er zeker van te zijn dat niets horizontaal scrolt.

Voorbeeld

Goed

afb { max-width: 100%; height: auto; }

Conclusie

Eén enkele regel (max-width:100%; hoogte:auto) lost de meeste beeldoverloop op mobiel op. Voeg dimensies toe in de HTML voor CLS, en overweeg srcset voor grote visuals. Een snelle oplossing voor een veelvoorkomend mobiel probleem.

Gerelateerde onderwerpen