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%;
}