title: Image auto width in CSS for all browsers?
body: <p>I have my <code>img</code> tag defined with some CSS as:</p>
  
  <pre><code>img
  {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
  }
  </code></pre>
  
  <p>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:  <a href="http://terraninstitute.com" rel="noreferrer">http://terraninstitute.com</a>. 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.</p>
  
  <p>Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.</p>
  
  <p>TIA</p>