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 mounted display, (picture a 16:9 monitor laid on its side). I would like the image to be full screen. Here is my latest attempt. I am using viewport scaling, but I have tried percentages and 'cover' and many combinations. I know this is not right, nothing has right been so far. The reason I have the vh and vw settings switched is because the running theory is that it still applies scaling and transformations on an image it thinks is portrait, even though it's been rotated to landscape. It is confusing and a bit frustrating. Thanks.

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bg {
  background-image: url("http://www.liftedsites.net/images/IMG_7863.jpg");
  height: 100vw;
  width: 100vh;
}

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

Solution

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>