title: Make the image take the full height/width of the div while preserving the aspect ratio
body: <p>I am making a simple lightbox for an image gallery. Problem is that the image does not take the full height/width of the <code>#wrapper</code> div. </p>
  
  <p>I tried using <code>max-width</code> and <code>max-height</code> css properties, but the image does not take the full width/height. In a small screen the image takes the full height/width accordingly, but in a large screen width, it does not take the full width/height.</p>
  
  <p>Also tried <code>width:100%; height:auto;</code> but if the height of the image is large it just overlaps the <code>#wrapper</code> div.</p>
  
  <p>Demo at <a href="http://codepen.io/aamus/pen/BjNebZ" rel="nofollow">codepen.io</a>.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="snap-modal"&gt;
      &lt;div id="wrapper"&gt;
          &lt;img src="http://placehold.it/450x450"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#snap-modal {
    width: 90%;
    height: 90%;
    outline: 1px solid lightgrey;
    top: 0;
    left: 0;
    position: fixed;
  }
  
  #snap-modal #wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  #snap-modal #wrapper img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
  </code></pre>
  
  <p>How do I make an image take the full height/width depending on the image size inside a div (in css if possible) while preserving the aspect ratio? Thank you.</p>