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.

10 Responses to “ Responsive Web Design: preserving images’ aspect ratio ”

Comment by Dave Beesley

Bruce,
Bleeding obvious. But one of those things that gets overlooked. Especially when you are deep in some “old IE” debugging hell. So totally worth blogging about. Infact its one of the 3 or 4 code snippets that it automatically in my CSS from the start of a project. Perhaps it’s worth putting on a post-it!

Comment by Reuven

The only problem is, that the css rule in the style sheet will be overridden by the in line rules every time
unless you add a !important before the end of that rule.

Comment by David Goss

@Reuven You might think so, but see the demo – it works without no !important. If the width and height were specified with inline CSS (e.g. style=”width:640px;height:480px”) then that would trump the stylesheet on specificity, but evidently all CSS trumps width and height attributes, which makes perfect sense for exactly this kind of situation.

Comment by Adrian Roselli

This technique (and some variations) also works with embedded YouTube videos. This is handy in a CMS world where end users paste code copied from YouTube into the page. It also trumps inline width/height attributes, but not inline styles.

Comment by Bruce

Yes,

this is talking about trumping the html height and width attributes (which are often added by default by CMSs), not inline styles. But I can’t think of a reason why you’d be using inline styles on content images rather than HTML attributes.

Comment by Adrian Roselli

To sort of address your last point, some blogging and CMS platforms embed inline styles on images. Blogger did it to me for a year or so and I had to constantly go in and remove them. Very frustrating since I still find posts where I missed them (was too lazy).

Comment by Bruce

Adrian

ah yes, but that’s “CMS” in the sense of “Crap motherfucking shitheap” rather than Content Management Systems. That doesn’t count.

Comment by Nick Fitzsimons

Further to the point about overriding the width and height attributes: CSS 2.1 section 6.4.4 specifies that presentational attributes in HTML “…are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules.” Hence why this works.