title: Maintain image aspect ratio when changing height
body: <p>Using the CSS flex box model, how can I force an image to maintain its aspect ratio?</p>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/xLc2Le0k/2/" rel="noreferrer">http://jsfiddle.net/xLc2Le0k/2/</a></p>
  
  <p>Notice that the images stretch or shrink in order to fill the width of the container. That's fine, but can we also have it stretch or shrink the <strong>height</strong> to maintain the image proportions?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
      &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
      &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
      &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slider {
      display: flex;
  }
  .slider img {
      margin: 0 5px;
  }
  </code></pre>