title: Keep 'transform-scale' aspect ratio for iframe
body: <p>I'm having trouble keeping the '<strong>transform-scale</strong>' attribute on an <em>aspect ratio</em> when the browser window is being resized. For instance, if the window was resized, the iframe with the transform-scale attribute would scale the contents inside to fit the iframe width and height without resizing anything of the sites contents. I can't seem to understand how I could achieve this without using JavaScript or any other Libraries. This is what I came up with below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;iframe id="resize" src="http://www.w3schools.com/" width="100%" height="100%"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin:0;
      padding:0;
  }
  div {
      height: 100vw;
      width: 56.25vw;
      /* 100/56.25 = 1.778 */
      background: skyblue;
      max-height: 100vh;
      max-width: 177.78vh;
      /* 16/9 = 1.778 */
      margin: auto;
      position: absolute;
      top:0;
      bottom:0;
      /* vertical center */
      left:0;
      right:0;
      /* horizontal center */
  }
  iframe {
      -webkit-transform:scale(0.8);
      -moz-transform-scale(0.8);
      -o-transform: scale(0.8);
      -ms-zoom: 0.8;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rkmyc95e/1/" rel="nofollow">http://jsfiddle.net/rkmyc95e/1/</a></p>
  
  <p>All I'm trying to do is maintain the '<strong>transform-scale</strong>' aspect ratio when the window is scaled.</p>
  
  <p>NOTE: As you can see, I'm also having issues maintaining the aspect ratio of the iframe, I can't maintain the top and bottom to stay in place.</p>