Search code examples
javascripthtmlcssiframescale

Scale content of fullscreen iframe

How can I scale the content of a fullscreen iframe without changing the size of the actual iframe?

This is my current attempt at trying to scale the content, but it ends up canceling out the 100% width and height:

<style>
    #frame {
    -ms-zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
    position:fixed; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px;
    width:100%; 
    height:100%; 
    border:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    z-index:999999; 
    }
</style>
    <iframe src="../index.php" id="frame">
    Your browser doesn't support iframes
</iframe>

Is there a way to do this in either javascript or css while keeping the height and width at 100%?

Solution

  • I found a solution by compensating for the loss from scale in the height and width:

    If scale is 75% just set height & width to 133.34%.