Css 将多个图像适配到父元素中

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

我曾希望使用

flex将非常简单，但结果并不是我所期望的。我做错了什么


div{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
img{
对象匹配：包含；
弹性收缩：1；
}
@介质（最大纵横比：1/1）{
div{
弯曲方向：立柱；
}
}



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