Image auto width in CSS for all browsers?

Question

I have my img tag defined with some CSS as:

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

It works just fine in some of the Mobile Browsers I have tried, as well as Google Chrome on a desktop. However, it does not seem to work in IE or FireFox. By that, I mean, as you resize the window. Take a look at a sandbox site I am working on: http://terraninstitute.com. I have the image on the home page intentionally set to be a huge picture. Also navigate to the Information (main menu) then Newcomers (side menu) and notice the map image at the bottom. On my Droid (and a few other devices I can get my hands on) as well as in Google Chrome this looks pretty good. In IE and FireFox, not so much.

Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.

TIA

Answer 1

You're declaring the width of your images multiple times in your document unnecessarily and declaring a max-width the wrong way. Max-width is supposed to define a max size/boundary for your images (600px, for example), if you declare max-width:100% in conjunction with width:100%, you're not really doing anything with that declaration as the images will expand 100% as it is.

Remove the width declarations from your CSS in the following lines:

line 116: delete the img declaration all together, it is not needed.

line 365: remove the max-width:100% and height:auto; attribute as they are not needed (and if you can delete the declaration all together as you can declare that elsewhere)

line 121: Now just stick with this one and just add the following:

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

Answer 2

Bootstrap solution for responsive images:

img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  /* Part 1: Set a maxium relative to the parent */
  max-width: 100%;

  /* IE7-8 need help adjusting responsive images */
  width: auto\9;

  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  height: auto;

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}