使多个图像适合父元素

问题描述

我有两幅长宽比不同的图像，我想并排显示它们，或者将它们一个显示在另一个之上，具体取决于父级的长宽比，如下所示：

我希望使用INSERT INTO ella (id,tmstmp,"ändere") VALUES (1,timestamp '2020-08-26 10:44:33','Thomas'); 可以很简单，但是结果不是我期望的。我在做什么错了？

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 {
  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/