title: CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rotate bg"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>