title: Fit multiple images into a parent element
body: <p>I have two images with different aspect ratios, and I want to show them either side-by-side or one above the other, depending on the aspect ratio of the parent, like this:</p>
  <p><a href="https://i.stack.imgur.com/s37Va.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s37Va.jpg" alt="horizontal layout" /></a>
  <a href="https://i.stack.imgur.com/REKo6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/REKo6.jpg" alt="vertical layout" /></a></p>
  <p>I had hoped that this would be very simple using <code>flex</code>, but the results are not what I expected. What am I doing wrong?</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>div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  img {
    object-fit: contain;
    flex-shrink: 1;
  }
  
  @media (max-aspect-ratio: 1/1) {
    div {
      flex-direction: column;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;img src="https://cdn2.picryl.com/photo/1767/01/01/tall-clock-601889-1024.jpg"/&gt;
    &lt;img src="https://www.goodfreephotos.com/cache/united-states/hawaii/other-hawaii/wide-angle-forest-landscape-of-oahu-in-hawaii_800.jpg"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>