CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

Question

I have tried many variations. Using an html img, using background image for an element. The idea is that I rotate a portrait oriented image 90 to display on a sideways mou

Answer 1

You need to adjust the transform-origin and add some translation to rectify the position. You have to also add overflow:hidden to hide the overflow created by the element because transform is only a visual effect and will not modify the layout of the page and before the tranform you will for sure have an overflow since you inverted the viewport units:

.rotate {
  transform: rotate(90deg) translateY(-100%);
  transform-origin:top left;
}

.bg {
  background: url(https://picsum.photos/2000/1000?image=1069) center/cover;
  height: 100vw;
  width: 100vh;
}

body {
  margin:0;
  overflow:hidden;
}

<div class="rotate bg"> </div>