Constrain images with max-width so pages reflow
An image with a fixed width holds that width whatever happens around it, so at high zoom it pushes past its column and takes a horizontal scrollbar with it. Setting max-width to 100 percent with height auto keeps the image inside whatever space it has been given, at its own proportions. W3C lists C37 as advisory for 1.4.10 Reflow, so it helps and is not the technique that satisfies the rule. Its scope is wider than hero images. Responsive layouts add and remove columns and blocks at different sizes, and this is what stops an image breaking out of any of them. Two declarations cover the whole site, and the same idea applies to tables, embedded video and anything else with intrinsic dimensions.
How we find it in an audit
The tell is a horizontal scrollbar that appears on image-heavy pages and disappears on text pages, which points straight at the images. We narrow to 320 CSS pixels and check every template. Fixed width attributes in the HTML and fixed widths in the CSS are both quick automated inventories.
How affected users experience it
One oversized image imposes horizontal scrolling on the whole page, so a reader at 400 percent pays for it on every line of text, not only next to the picture. That is a large cost for a decorative photograph, and one line of CSS removes it everywhere.
Passes vs. fails
Passes
img { max-width: 100%; height: auto; }Fails
<img src="hero.jpg" width="1200">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
The other techniques filed under this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- C31sufficientReflow content with flexbox at narrow widths
- C32sufficientStack columns with grid and media queries
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
This guide is our interpretation of W3C technique C37: Using CSS max-width and height to fit images. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.