1

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.

Stevenson C
  • 15
  • 1
  • 5

1 Answers1

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

Community
  • 1
  • 1
Cooper Buckingham
  • 2,503
  • 2
  • 15
  • 23
  • Thanks for the advice, but unfortunately that doesn't help me maintain the aspect ratio for the iframes 'transform-scale' attribute. – Stevenson C Jun 20 '15 at 00:14
  • I think you might be confused about what transform scale does. You can transform the x and y scale separately, but setting transform scale to a single value will always maintain whatever ratio already existed between the element's height and width. – Cooper Buckingham Jun 20 '15 at 00:16
  • Yes, but how could I force the attribute to change value based on the iframes aspect ratio? – Stevenson C Jun 20 '15 at 00:25
  • Any solutions to this? – Omair Nabiel Aug 11 '21 at 08:33