The height attribute quietly beats your aspect-ratio

This one cost me a confusing hour, so it is written down.

Adding width and height attributes to images is standard advice, and it is correct: without them the browser cannot reserve space, so the page reflows as each image arrives.

I added them across 65 images. Four broke immediately. A photo that should have rendered 428×337 came out 428×1201.

Why

Those images were sized by CSS like this:

.skills-setup-card img {
  width: 100%;
  aspect-ratio: 4 / 3.15;
  object-fit: cover;
}

Note there is no height. The HTML height attribute maps to a presentational hint, and with no CSS rule setting height, nothing overrode it. Once the browser has both a definite width and a definite height, aspect-ratio is ignored entirely.

The fix

img { height: auto; }

That is it. The attribute still reserves space before load, but CSS decides the final size. It belongs in a base rule because class-level rules like .cert-card img { height: 120px } still win on specificity, so nothing else shifts.

The habit worth keeping

I only caught this because I recorded every image’s rendered box before the change and diffed after. Twelve of thirteen pages came back pixel-identical; the thirteenth was where the bug lived. Decide what “unchanged” means as numbers, then diff. See also the note on image sizing.