UX / UI Impact moyen Facile 10 à 20 minutes

Images réactives

Les images doivent tenir sur mobile sans défilement horizontal.

Ce que c’est

Une image de grande largeur fixe (par exemple width="1200") peut déborder hors écran sur un mobile étroit et provoquer un défilement horizontal de toute la page.

Pourquoi c’est important

Le défilement horizontal est l'un des problèmes UX les plus ennuyeux sur mobile : il casse la mise en page et semble inachevé. C'est facilement évité avec une seule règle CSS.

Comment faire

1Donnez aux images une largeur maximale : 100 % et une hauteur : auto.
2Spécifiez la largeur et la hauteur dans le HTML pour la stabilité de la mise en page (CLS), mais limitez-les dans CSS.
3Pour différentes tailles, considérez srcset / <picture>.
4Testez sur une largeur étroite (~ 360 px) pour vous assurer que rien ne défile horizontalement.

Exemple

Correct

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

Conclusion

Une seule règle (max-width : 100 % ; height : auto) résout la plupart des débordements d’images sur mobile. Ajoutez des dimensions dans le HTML pour CLS et, pour les grands visuels, envisagez srcset. Une solution rapide à une maladie mobile courante.

Sujets liés