Поворот изображения * перед * рендерингом?

Question

Я хотел бы повернуть пейзажное изображение, чтобы оно отображалось в портретной ориентации на 2-панельном виде. Исходное альбомное изображение будет по-прежнему использоваться в виде одной панели, поэтому изменение исходного файла не вариант.

Проблема заключается в том, что размер изображения устанавливается до его поворота, поэтому DOM расставляет вещи в соответствии с «предварительно повернутым» состоянием. Есть ли способ

1. Повернуть ориентацию изображения в js (я бы предпочел не использовать библиотеку, но я готов)
2. Размер элементов в состоянии «после поворота»?

Ниже приведен мой текущий код (содержит только повернутое изображение в виде двух панелей), за которым следует ссылка на более подробный пример кода ручки ( включает больше контекста для желаемого рендера)

Если это поможет: я работаю в React над реальным проектом.

.spread {
  display: flex;
  width: 50%;
  border: 2px solid green;
  height: 250px;
  align-items: center;
  justify-content: center;
}

.frame {
  border: 2px solid red;
  height: 80%;
  display: flex;
}

img {
  align-self: center;
}

.portrait {
  height: 100%;
  width: auto;
}

.ldsc {
  width: 100%;
  height: auto;
  max-width: 312px;
  min-width: 298px;
}

.ldsc.port {
  transform: rotate(90deg);
}

<div class="spread">
  <div class="frame port">
    <img class="ldsc port" src="https://picsum.photos/300/200" alt="portraitImg" />
  </div>
  <div class="frame port">
    <img class="portrait" src="https://picsum.photos/200/300" alt="portraitImg" />
  </div>
</div>

Попробуйте!

Answer 1

Вот еще одно решение. Это будет работать до тех пор, пока пропорции других ваших изображений не изменятся. Просто добавьте его в конец вашего css или замените .ldsc.port{...

.ldsc.port{
    transform: rotate(90deg) scale(1.5);
}
.frame.port {
  overflow:hidden;
}

Answer 2

1. Javascript может вращать изображение двумя способами: с css и внутри холста. Первое решение похоже на ваше, а второе довольно сложно и не подходит для вашего случая.
2. Второе решение вполне возможно.
3. Может быть другое решение, установив изображение в качестве фона для квадратного div, background-position:contain. И поместив квадратный div в вашу вертикальную панель. В основном, чистый css.