Images scale to container width on mobile

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.

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.

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

• ID: mobile-responsiveness.layout.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:

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

  For Next.js Image component:

  <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"
  />