title: Can flexbox horizontally and vertically center images without stretching them?
body: <p>I want to make images centered horizontally and vertically inside their containers. And if their width or height is greater than their containers' width or height, then make them automatically shrink while keeping their proportions.</p>
  
  <p>The following CSS code is what I use on the container to try to achieve the goal:</p>
  
  <pre><code>display: -ms-flexbox;
  display: -webkit-flex;
  display:         flex;
      -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
            -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  </code></pre>
  
  <p>And <a href="http://jsfiddle.net/IanY/eag0frw9/1/" rel="nofollow">here are three examples on jsFiddle</a>:</p>
  
  <ul>
  <li>The first example is an image whose width is greater than its height. It works fine.</li>
  <li>The second example is an image whose height is greater than its width. But in this example, its width stretches to container's width, and that isn't what I want.</li>
  <li>The third example has the same problem as the second example.</li>
  </ul>
  
  <p>Besides, I know the goal can also be achieved by using CSS position and transform. But such a method often creates 1 pixel gap between the resized image and the container's border. That is, the resized image fails to touch the container's border, at where it should do. Therefore I have to resort to CSS flexbox.</p>