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.
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?
Any suggestions or solutions?