title: CSS image row equal height that fills width and preserves aspect ratio
body: <p>I'm trying to get 3 images with different aspect ratios to display in a row that fills the container width. I want their heights to be equal but fluid. So images preserve their aspect ratio but scale to fit the width of the container.</p>
  <p>Here's my attempt:</p>
  <p><a href="https://codepen.io/creativetags/pen/ExXmjGV" rel="nofollow noreferrer">Codepen</a></p>
  <pre><code>.row
    display: flex
  .wrap
    padding: 0 20px
  img
    object-fit: cover
    max-width: 100%
    height: 100%
  </code></pre>
  <p>It isn't currently preserving the aspect ratio but they do resize and fill the container width.</p>
  <p>Ideal solution wouldn't need Javascript</p>