Keep aspect ratio of vertical aligned image in flex box

Question

img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

The full code can be seen here: http://jsfiddle.net/ZSSVt/

I want the image to "auto-fit" inside its div container, like here: http://jsfiddle.net/y4Y3S/ (but vertically aligned).

Right now the kitten gets squished when the image is resized. How to fix that?

Answer 1

updated jsFiddle

Try wrapping the image in another div. <img> elements behave differently than <div> elements when width and height are applied.

For example width: 100% applied to <img> means that the image element will have the same width as the source picture. If you apply width: 100% to <div>, it would have the same width as the first parent with defined width.

Thus, your desired html will be:

<div class='box'>
    <div class='wrapper'>
        <img src="http://placekitten.com/g/200/300" />
    </div>
</div>    

With corresponding css for wrapper div:

div.wrapper {max-height:100%;}