Блог

У меня есть два изображения с разными соотношениями сторон, и я хочу показать их либо рядом, либо одно над другим, в зависимости от соотношения сторон родительского элемента, вот так:

Я надеялся, что это будет очень простое использование 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>  

 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/