Dynamically size images for mobile first design (omega theme) 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?
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.