javascript - Fill rotated landscape image within fixed sized container

Question

.photo-wrapper{
  width: 200px;
  height: 240px;
}

img{
 transform: rotate(90deg);
 display:block;
 width:100%;
}

<div class="photo-wrapper">
  <img src="landscape-image.jpg"/>
</div>

Wthin .photo-wrapper users can upload an image, whether it is portrait or landscape it spans the width of the container correctly when uploaded, but there is an option to rotate it, when it is rotated the height of the image doesn't span the width of the container it maintains the height it has when uploaded to the container. Is there a way this can be done?

question from:https://stackoverflow.com/questions/65841416/fill-rotated-landscape-image-within-fixed-sized-container

Answer 1

Since the container has fixed width/height you can do like below:

.photo-wrapper {
  --w: 200px;
  --h: 240px;
  width: var(--w);
  height: var(--h);
  border: 1px solid;
  display:inline-block;
}

img {
  display: block;
  width: var(--w);
  height: var(--h);
  object-fit:cover;
}

img.rotate {
  transform: rotate(90deg) translateY(-100%);
  width: var(--h);
  height: var(--w);
  transform-origin: top left;
}

<div class="photo-wrapper">
  <img src="https://picsum.photos/id/1/400/300">
</div>

<div class="photo-wrapper">
  <img class="rotate" src="https://picsum.photos/id/1/400/300">
</div>

<div class="photo-wrapper">
  <img src="https://picsum.photos/id/104/500/600">
</div>

<div class="photo-wrapper">
  <img class="rotate" src="https://picsum.photos/id/104/500/600">
</div>