Stop Fixed-Size Images From Breaking Mobile Layouts

.article-image {
  width: 640px;
  height: auto;
}

.article-image {
  width: 640px;
  max-inline-size: 100%;
  block-size: auto;
}

Root cause

An image is a replaced element with intrinsic dimensions supplied by its resource. An authored fixed width can override the normal available inline size. When that width is larger than the containing block, the image itself becomes wider than the article and the page gains horizontal overflow.

The width and height attributes in the fixture communicate the intrinsic ratio before the resource loads. CSS then limits the rendered inline size while preserving automatic proportional height.

Separate intrinsic size from rendered size

Inspect naturalWidth and naturalHeight alongside the rendered rectangle and the containing block’s client width. In this fixture the 640 by 360 intrinsic dimensions are valid; the failure is that the rendered inline size is also forced to 640 pixels inside a narrower article. The fixed state keeps the intrinsic ratio metadata but caps the rendered box at the available boundary.

Test the widest real asset, a slow load, and a failed load state. Width and height attributes should reserve the correct ratio before decoding, while responsive CSS prevents overflow after decoding. Alternative text must still describe the image’s purpose, and any linked or actionable image must retain a visible focus indicator at the reduced size.

When this fix is not enough

Containment does not choose an efficient file for the device. Large production images may also need srcset, sizes, modern formats, compression, and an appropriate loading strategy. Those performance decisions are separate from ensuring the rendered box cannot exceed its content boundary.

Regression condition

At 320 and 375 CSS pixels, the failing image must create positive page-level overflow. The fixed image must remain inside the page, render narrower than its 640-pixel intrinsic width, and preserve the original 16:9 aspect ratio.