Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
UX / UI Medium impact Easy 10–20 min

Responsive images

Images must fit on mobile without horizontal scrolling.

What it is

An image with a fixed large width (e.g. width="1200") can overflow off-screen on a narrow mobile and cause horizontal scrolling of the whole page.

Why it matters

Horizontal scrolling is one of the most annoying UX problems on mobile — it breaks the layout and looks unfinished. It's easily prevented with a single CSS rule.

How to do it

  1. 1Give images max-width: 100% and height: auto.
  2. 2Specify width and height in the HTML for layout stability (CLS), but constrain them in CSS.
  3. 3For various sizes, consider srcset / <picture>.
  4. 4Test at a narrow width (~360px) to ensure nothing scrolls horizontally.

Example

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

Conclusion

A single rule (max-width:100%; height:auto) solves most image overflow on mobile. Add dimensions in the HTML for CLS, and for large visuals consider srcset. A quick fix for a common mobile ailment.

Related topics