title: How do you prevent an image from expanding beyond it's container?
body: <p>I have an image with a height larger than that of it's container.  The image is set to max-height: 100% and max-width: 100% but it continues to grow beyond it's containing element (in height - surprisingly not in width)</p>
  
  <p>How do I prevent it from expanding beyond it's container while keeping it's aspect ratio?</p>
  
  <p>An example is available at <a href="http://codepen.io/navarr/pen/zxZjjP" rel="nofollow noreferrer">http://codepen.io/navarr/pen/zxZjjP</a>, and the code at that example:</p>
  
  <p>The HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    display: flex;
    .col {
      display: block;
      border: 1px solid blue;
      width: 50px;
      height: 400px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      .link {
        flex: 1 1 auto;
        img {
          max-height: 100%;
          max-width: 100%;
        }
      }
      h3 {
        flex: 0 0 auto;
        background: green;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col"&gt;
      &lt;div class="link"&gt;
        &lt;img src="http://i.imgur.com/qG6NmU7.png" /&gt;
      &lt;/div&gt;
      &lt;h3&gt;100 x 800 image&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;div class="link"&gt;
        &lt;img src="http://i.imgur.com/EjltysP.png" /&gt;
      &lt;/div&gt;
      &lt;h3&gt;800 x 100 image&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;div class="link"&gt;
        &lt;img src="http://i.imgur.com/zJlunbp.jpg" /&gt;
      &lt;/div&gt;
      &lt;h3&gt;800 x 100 image&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first box illustrates the problem: the image expanding beyond it's containing element.</p>
  
  <p>The second and third box show this not being a problem as long as the image is wider than it is tall.</p>