Dynamically size images for mobile first design (omega theme)

Question

I've built my first site using an omega subtheme and I'm really liking it. The mobile first design dynamically changes the width of the page to follow the width of the browser.

With my column arrangement with a wide browser, my content area is 780px wide. So, the header images I use on my blog posts are up to 780px wide. If the user's browser is more narrow, then the css will shrink the content area to the following sizes:

wide: 780px normal: 620px narrow: 460px mobile: 720px and smaller (in this arrangement the sidebars are removed to give the content more room.

The smaller the browser gets, the smaller the content area gets. When it is below 720px, then it follows pixel for pixel, so if I make my browser only 480px wide, then that's how wide the content area will be.

PROBLEM:

The header image on my Article nodes is up to 780px wide so that it fills the content area in the widest browser size. However, when the content area shrinks to 620px, the image doesn't get smaller which means that it overlaps the side bar.

The image below shows how the layout would work in the "wide" arrangement.

The next one shows how the header image is overlapping the sidebar in the "normal" arrangement:

I tried to solve the problem by setting the css width of my header image to be 100% of its container element. That did successfully restrict the width of the image, but when drupal generates the html for that image it always includes explicit width and height tags. This causes the image to become distorted because the width is shrinking to match 100% of the parent container but the height isn't changing along with it, so it ends up looking like this:

Is there a way to prevent drupal from including the explicit height attributes? Or is there some other drupal solution?

I know that I could set up some javascript to strip those attributes off, but that seems really hackish.

Any suggestions or solutions?

Answer 1

More of a CSS than Drupal question, but the standard solution is

img {
  max-width: 100%;
  height: auto;
}

You might get some funny results with images inside table columns that don't have an explicit or minimum width set, but those just have to be handled on a case-by-case basis.

Answer 2

I would add this in a comment to Clive's answer, but I don't have enough reputation to post a comment, so I'll add this here. Not only is the standard CSS solution correct, but be sure also to read Ethan Marcotte (who was one of the first prominent authors to write about responsive design) writing about fluid images at: http://unstoppablerobotninja.com/entry/fluid-images/

There's important information there as to making fluid images a bit more cross-browser compatible, especially for older versions of IE that don't understand max-width.

Cheers!