将多个图像放入父元素中

Question

我有两张具有不同纵横比的图像，我想根据父项的纵横比将它们并排或一个在另一个之上显示，如下所示：

我曾希望使用flex 会非常简单，但结果并非我所期望的。我做错了什么？

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;
  }
}

<div>
  <img src="https://cdn2.picryl.com/photo/1767/01/01/tall-clock-601889-1024.jpg"/>
  <img src="https://www.goodfreephotos.com/cache/united-states/hawaii/other-hawaii/wide-angle-forest-landscape-of-oahu-in-hawaii_800.jpg"/>
</div>

Answer 1

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.first-img {
  width: 18.5%;
}
.second-img {
  width: 81%;
}

@media (max-aspect-ratio: 1/1) {
  div {
    flex-direction: column;
  }
    .first-img {
    width: 100%;
  }
  .second-img {
    width: 100%;
  }
}

https://jsfiddle.net/1g69up3h/9/