Image aspect ratio inside absolutely positioned div
<p>This'll probably be one of the easier questions, but I just cannot seem to find the answer.</p>

<p>I've got the following setup: </p>

<pre><code>.wrapper {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  transform: translateX( -50%);
}

img.content {
  height: 100%;
  width: auto;
}
</code></pre>

<p>The image's width doesn't seem to change when shrinking the height of the window.</p>

<p>Here's a quick JSfiddle to demonstrate the issue. Adjusting the height of the window either skews or offsets the image, instead of adjusting the width accordingly.<br>
<a href="https://jsfiddle.net/5p82ey8k/" rel="nofollow">https://jsfiddle.net/5p82ey8k/</a></p>

<p>Cheers</p>