# Images scale to container width on mobile

- **Pattern:** `ab-001919` (`mobile-responsiveness.layout.responsive-images-mobile`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001919
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001919)

## Why it matters

An `<img>` tag with `width="1200"` and no `max-width: 100%` renders at 1200 physical pixels even on a 375px-wide phone, forcing horizontal scroll and cutting off surrounding content. This breaks layout for every page containing the image and undermines the viewport meta configuration that would otherwise keep the page mobile-friendly. Images are one of the most common causes of accidental overflow because `<img>` defaults do not include any responsive constraint.

## Severity rationale

High because image overflow is visible on every page the image appears on and degrades every mobile visitor's experience.

## Remediation

Apply a global CSS rule to all images so they scale down to their container. For Next.js `<Image>`, always provide a `sizes` prop so the browser picks the right source at each breakpoint. Put the base rule in `src/app/globals.css`.

```css
img { max-width: 100%; height: auto; display: block; }
```

## Detection

- **ID:** `responsive-images-mobile`
- **Severity:** `high`
- **What to look for:** Check image elements and image component usage. Look for `<img>` tags with fixed `width` attributes exceeding mobile viewport widths and no `max-width: 100%`. In Next.js, check `<Image>` component usage — verify `sizes` prop is used for responsive behavior, or `fill` layout with a responsive container. Look for `max-width: 100%` in global CSS (a good sign).
- **Pass criteria:** Count all `<img>` tags and `<Image>` components in the project. For each, verify it has `max-width: 100%` applied (via global CSS, Tailwind `max-w-full`, or framework responsive defaults), or uses responsive configuration (`sizes` prop, `fill` layout). Report: "X of Y images have responsive sizing." No more than 0 images may have fixed pixel widths exceeding 640px without a `max-width: 100%` constraint.
- **Fail criteria:** At least 1 image has a fixed pixel width exceeding 640px without `max-width: 100%`, causing it to overflow its container on mobile.
- **Skip (N/A) when:** Never — images are present in virtually all web projects.
- **Detail on fail:** `"Hero image in components/hero.tsx has fixed width of 800px with no max-width constraint — 1 of 12 images overflows on mobile"` or `"Global CSS does not include max-width: 100% for img elements — 12 images lack responsive sizing"`.
- **Cross-reference:** Image performance (lazy loading, format optimization, payload size) is covered in the Performance & Load Readiness Audit.
- **Remediation:**

  ```css
  /* Global CSS */
  img { max-width: 100%; height: auto; display: block; }
  ```

  For Next.js Image component:

  ```tsx
  <Image
    src="/hero.jpg"
    alt="Hero image"
    width={1200}
    height={600}
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    className="w-full h-auto"
  />
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001919