title: Max-height on img not working in IE
body: <p><br />I am trying to give the max-height property to an image, which works perfectly in all browsers except IE. The image doesn't resize according to the wrapping division's size.
  I searched for solution, people said give <code>height:auto; width:auto</code>, but this doesn't seem to work.
  I am taking the image link dynamically. So I can't be sure what size will the image have.
  <br />I have this :</p>
  
  <p><strong>HTML</strong> :</p>
  
  <pre><code>&lt;header&gt;
  &lt;div class="logo"&gt;
  &lt;img src="&lt;?php echo $logo_link; ?&gt;" /&gt;
  &lt;/div&gt;          
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong> :</p>
  
  <pre><code>header {
  height:10%;
  }
  .logo {
  float:left;
  }
  .logo img{
  max-height: 100%;
  width:auto;
  }
  </code></pre>
  
  <p>Image inside logo division should resize, because header contains .logo division and I have set the header to height:10% and hence it resizes according to window size. Works absolutely great in other browsers but IE.</p>
  
  <p>Any thoughts or workaround?</p>