title: Resizing image to perfectly fit a div with variable dimensions
body: <p>I need to scale an image inside a <em>div</em> properly, so that the image keeps its proportions and so that either the width is equal to 100% or the height is equal to 100%.<br>
  So basically that the image takes up as much space as possible in the <em>div</em> whilst maintaining aspect ratio. And lets keep in mind that the div can change width and height.</p>
  
  <p>So I have the intuition for this, but I don't have the code ...</p>
  
  <blockquote>
    <p>The idea would be to get the ratio (height/width) of the div with
    <em>JavaScript</em>/<em>jQuery</em>. => ratio A    Then get ratio (height/width) of the image. => ratio B</p>
    
    <p><strong>Note:</strong> If ratio > 1, then we have a portrait image or div.<br>
    And if ratio &lt; 1, then we have a landscape image or div.</p>
    
    <p>If ratio A &lt; ratio B, then we want height of image to be set at 100%; 
    If ratio A > ratio B, then we want width of image to be set at 100%;</p>
  </blockquote>
  
  <p>So if we have a responsive <em>div</em>, width or height = 100% will change dynamically.</p>
  
  <p>Is this possible?</p>