Keep 'transform-scale' aspect ratio for iframe

Question

I'm having trouble keeping the 'transform-scale' attribute on an aspect ratio 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:

HTML:

<div>
<iframe id="resize" src="http://www.w3schools.com/" width="100%" height="100%"></iframe>
</div>

CSS:

* {
    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;
}

http://jsfiddle.net/rkmyc95e/1/

All I'm trying to do is maintain the 'transform-scale' aspect ratio when the window is scaled.

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.

Answer 1

The transform scale you are using is just going to set the width of the iframe to be 80% of its width, and the height of the iframe to be 80% of its height. And won't help you with maintaining an aspect ratio.

You have the iframe set to be 100% of its parent width and height on the iframe element in html. If you remove those two attributes, you'll see something interesting, a starting point for fixed aspect ratio that you can start working with.

To then maintain aspect ratio of either the div or the iframe, check out a common question on SE like: https://stackoverflow.com/a/10441480/3708223