Получите точно такие же размеры изображения по горизонтали и вертикали (Особый случай)

Question

Я хочу создать специальную галерею изображений. Все изображения должны иметь одинаковый размер, но некоторые в портретном формате, а некоторые в альбомном формате. Пример. Если изображение в альбомном формате имеет ширину 500 пикселей и высоту 300 пикселей, изображение в портретном формате должно иметь ширину 300 пикселей и высоту 500 пикселей. Но макет не должен основываться на значениях пикселей, а также не на vw или vh.

. В последние часы я пытался получить правильные размеры с процентными корректировками. Но это всегда немного отличается в разных браузерах и размерах браузеров.

Что мне нужно: (гибкая) высота .vertical должна быть шириной .image. Так что это должно повлиять на то же значение пикселя.

Это возможно с CSS? Или, может быть, с jQuery?

А, и важно сохранить это width: calc(50% - 28px);.

Был бы очень благодарен за помощь!

.image-gallery {
  width: 70%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: flex-start;
  background: darkgrey;
}

.image {
  width: calc(50% - 28px);
  margin: 20px;
}

.vertical {
  width: calc(72.3% - 28px); /* Instead of this, I need here the (flexible) height of  ".image" */
}

img {
  width: 100%;
  float: left;
}

<div class="image-gallery">

  <div class="image">
    <img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_FINALS-434.jpg" />
  </div>

  <div class="image vertical">
    <img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_SP-43-1616x1080.jpg" />
  </div>

</div>

Answer 1

Пожалуйста, попробуйте следующий код.

.image-gallery {
    width: 70vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: flex-start;
    background: darkgrey;
}

.image {
  width: calc(50% - 28px);
  margin: 20px;
}

.vertical {
    width: auto;
}

img {
  width: 100%;
  float: left;
}

.vertical img{
    max-height: 100%;
    width: auto;
}

Поскольку все изображения будут иметь одинаковый размер, вертикальное изображение будет иметь ширину изображения как высоту. Согласно вашему css, нормальное изображение (портретное изображение) будет иметь (35vw - 28px) ширину, потому что .image-gallery имеет ширину 70vw. Таким образом, вертикальное изображение будет иметь высоту 35vw-28px. Пожалуйста, попробуйте мой код, и если у вас есть какие-либо вопросы, пожалуйста, прокомментируйте меня.

ОБНОВЛЕНИЕ

Добавлен jQuery код.

<script>
    $(window).resize(function(){
        $('.vertical').height($('.image:not(.vertical)').width());
    }).trigger('resize');
</script>