title: Make the img tag width and height 100% inside overflow hidden div while maintaining the aspect ratio
body: <p>I need to make the img tag width and height 100% inside overflow hidden div while maintaining the aspect ratio.</p>
  
  <p>What I reached for is putting the image within overflow hidden div And the image is max-width 100% and auto height.</p>
  
  <pre><code>&lt;div id="foo"&gt;
      &lt;img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but the problem i'm facing is not go height 100% </p>
  
  <p><img src="https://i.stack.imgur.com/EJBlS.png" alt="enter image description here"></p>
  
  <p><strong>Look the code in action <a href="http://fiddle.jshell.net/TARwL/" rel="nofollow noreferrer">http://fiddle.jshell.net/TARwL/</a></strong></p>
  
  <p>And get close look at the div#cover is 100% width and height is perfect look and i would like to see my code do the same</p>
  
  <p>I can't use the background-size:cover method because <strong><em>beside</em></strong> is not working in older browsers, <strong>I can't click right and save the image and this is important to me</strong></p>