Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
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

  1. 1Dajte obrázkom max-width: 100% a height: auto.
  2. 2Uvádzajte width a height v HTML kvôli stabilite layoutu (CLS), ale obmedzte ich v CSS.
  3. 3Pre rôzne veľkosti zvážte srcset / <picture>.
  4. 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