title: Centering and Scaling an Image in a Flexbox
body: <p>With am <code>&lt;img&gt;</code> (of unknown dimensions) inside a container set to <code>display:flexbox</code>, is it possible to satisfy the following criteria:</p>
  
  <ol>
  <li>If the image's native width is smaller than the container's width, it is horizontally centered within the container.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/dAWpM.png" alt="enter image description here"></p>
  
  <ol start="2">
  <li>If the image's native height is smaller smaller than the container's height, it is vertically centered with the container.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/z5lbo.png" alt="enter image description here"></p>
  
  <ol start="3">
  <li>If the image's native width is greater than the container's width, the image is scaled to the width of the container.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/lh5p0.png" alt="enter image description here"></p>
  
  <ol start="4">
  <li>If the image's native height is greater than the container's height, the image is scaled to the height of the container.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/hmTXx.png" alt="enter image description here"></p>
  
  <p>I've noticed big disparities between how Chrome and Firefox treat images that are flexbox children. Chrome gets halfway there, but squashes the image vertically. Firefox gets halfway there, but squashes the image horizontally: <a href="http://codepen.io/anon/pen/ZGjzKP" rel="noreferrer">Codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .Container {
    height: 100%;
    width: 100%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  img{
    max-height: 100%;
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
      &lt;img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the closest I can get <a href="http://codepen.io/anon/pen/jPpOzE" rel="noreferrer">Codepen</a>, which fails on 4.:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .Container {
    height: 100%;
    width: 100%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .ImageWrapper {
    max-height: 100%;
    max-width: 100%;
  }
  
  img{
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
    &lt;div class="ImageWrapper"&gt;
      &lt;img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that this kind of behaviour was previously impossible without JavaScript, but I'm surprised that it doesn't seem to be achievable using flexbox.</p>
  
  <p><em>Note: I'm not looking for a JavaScript solution or a solution that doesn't work in modern browsers yet.</em></p>
  
  <p>In response to David Mann's answer, here is the previous example using <code>object-fit</code> <a href="http://codepen.io/anon/pen/qdyBMx" rel="noreferrer">Codepen</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .Container {
    height: 100%;
    width: 100%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  img{
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
      &lt;img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a <a href="http://codepen.io/anon/pen/VLBwVG" rel="noreferrer">Codepen</a> using the <a href="https://github.com/anselmh/object-fit" rel="noreferrer">polyfill</a>. Appears to work OK in IE10 but broken in IE11.</p>