UX / UI Stredný dopad Ľahké 10–20 min

Responzívne obrázky

Obrázky sa musia zmestiť na mobil bez vodorovného posuvu.

Čo to je

Obrázok s pevnou veľkou šírkou (napr. width="1200") môže na úzkom mobile pretiecť mimo obrazovku a spôsobiť vodorovné posúvanie celej stránky.

Prečo to riešiť

Vodorovný posuv je jeden z najotravnejších UX problémov na mobile, rozbíja layout a pôsobí nedorobene. Ľahko sa mu predíde jediným pravidlom v CSS.

Ako na to

1Dajte obrázkom max-width: 100% a height: auto.
2Uvádzajte width a height v HTML kvôli stabilite layoutu (CLS), ale obmedzte ich v CSS.
3Pre rôzne veľkosti zvážte srcset / <picture>.
4Otestujte na úzkej šírke (~360px), či sa nič neposúva vodorovne.

Príklad

Správne

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

Záver

Jediné pravidlo (max-width:100%; height:auto) vyrieši väčšinu pretekania obrázkov na mobile. Doplňte rozmery v HTML kvôli CLS a pri veľkých vizuáloch zvážte srcset. Rýchla oprava častého mobilného neduhu.

Súvisiace témy