Responsive Web Design: preserving images’ aspect ratio

Responsive Web Design: preserving images’ aspect ratio:
Probably too obvious, but I thought I’d post it anyway.
One of the fundamental building blocks of responsive web design is ensuring images sit within their containers by a simple CSS rule img {max-width:100%;}.
Generally, this works splendidly. But if you’re “reponsifying” an old site, you might find that the authors included the images’ heights and widths as attributes in the HTML.
In this case, the img {max-width:100%;} can wreck the aspect ratio when the image is squeezed, as the width is forced by the CSS to shrink, but the height is still set in the HTML. See my photo of the most overloaded truck in the world and narrow the browser window.
This is easily cured without trawling through the markup and removing HTML height attributes. Simply extend your img CSS so it reads img {max-width:100%; height:auto;} and aspect ratio is preserved.

DIGITAL JUICE