title: Auto Image resize with broswer window using img max-width: 100% works in Chrome but not IE when parent div has position: absolute
body: <p>I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor  has position:absolute;</p>
  
  <p>(For information about this technique see 
          <a href="http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries" rel="nofollow">http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries</a>
  )</p>
  
  <p>The following code can be used to demonstrate or reproduce this problem. you can also see this at <a href="http://sketchmotion.com/image-test2/" rel="nofollow">http://sketchmotion.com/image-test2/</a>.  You will notice that resizing the browser window will resize the image in Chrome but not IE   (I am running IE 11) .  However,  if you remove the following lines:</p>
  
  <pre><code>    .mydiv{
          position: absolute;  
      }
  </code></pre>
  
  <p>You will find that it now works in both Chrome AND IE.</p>
  
  <p>This is not helpful since I I use position: absolute;  on some of my parent divs on my site.  And I need my site to work in IE and Firefox.</p>
  
  <p>Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
      &lt;!--  &lt;link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;  --&gt;
  
      &lt;style type="text/css"&gt;
  
          .mydiv{
              position: absolute;  
          }
  
          img{
          /***  Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video.  ***/
          /***  You can set the media element’s max-width to 100 percent, and the browser will make    ***/
          /***  the image shrink and expand depending on its container.    ***/
          /***  To maintain the right proportions use auto height  ***/
          max-width: 100%;
          height: auto; 
          width: auto\9; /* ie8 */
          }
  
  &lt;/style&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;  
  
  
  &lt;!--    --&gt;
      &lt;div class="mydiv"&gt; 
      &lt;div class="slides"&gt;    
      &lt;div class="slide"&gt; 
          &lt;img alt=""    src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" /&gt;
      &lt;/div&gt;  
      &lt;/div&gt;    
      &lt;/div&gt;   
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>