I am looking for a way to display a landscape image in portrait orientation within a 2-panel view without altering the original file. The challenge I am facing is that the image size is set before rotation, causing spacing issues with DOM elements. Is there a way to:
- Rotate the image orientation using Javascript (preferably without using a library, but open to suggestions)
- Adjust element sizes after rotation?
Below is my current code snippet (showing the rotated image in a 2-panel view) and a link to a more detailed example on CodePen:
If it helps: I am working on this project using 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>