title: Images not resizing automatically (via CSS) in Firefox and Internet Explorer
body: <p>I have these images in my webpage, that I want to automatically shrink when the viewport's width is reduced. I am using the following CSS to do this:</p>
  
  <pre><code>.autoResizeImage {
      max-width: 100%;
      height: auto;
      width: auto;
  }
  </code></pre>
  
  <p>The images which I want to resize are of two types:</p>
  
  <ol>
  <li>Ones which are inside <code>td</code>'s in a <code>table</code></li>
  <li>Ones which are not inside a <code>table</code></li>
  </ol>
  
  <p>On Chrome, images of both types shrink automatically when the viewport's width is reduced. However, on Firefox and Internet Explorer at least, this shrinking is only happening for the second type, and not for the first type (a scrollbar appears instead).</p>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/ahmadka/raSSq/2/" rel="nofollow">http://jsfiddle.net/ahmadka/raSSq/2/</a></p>
  
  <p>Notice that the small cell contained images do NOT resize in Firefox/IE, however the banner at the bottom DOES resize.</p>
  
  <p>Can someone figure out what the issue is ?</p>