UX / UI Střední dopad Snadné 10–20 min

Responzivní obrázky

Obrázky se musí vejít na mobil bez vodorovného posuvu.

Co to je

Obrázek s pevnou velkou šířkou (např. width="1200") může na úzkém mobilu přetéct mimo obrazovku a způsobit vodorovné posouvání celé stránky.

Proč to řešit

Vodorovný posuv je jeden z nejotravnějších UX problémů na mobilu, rozbíjí layout a působí nedodělaně. Snadno se mu předejde jediným pravidlem v CSS.

Jak na to

1Dejte obrázkům max-width: 100% a height: auto.
2Uvádějte width a height v HTML kvůli stabilitě layoutu (CLS), ale omezte je v CSS.
3Pro různé velikosti zvažte srcset / <picture>.
4Otestujte na úzké šířce (~360px), zda se nic neposouvá vodorovně.

Příklad

Správně

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

Závěr

Jediné pravidlo (max-width:100%; height:auto) vyřeší většinu přetékání obrázků na mobilu. Doplňte rozměry v HTML kvůli CLS a u velkých vizuálů zvažte srcset. Rychlá oprava častého mobilního neduhu.

Související témata