How can I re-size the contents of an iframe based on the size of the iframe?

Question

I have an iframe that must take up a width value of 60%, but the height can be anything. Is there any way I can "zoom" the contents of the iframe so that it fits the with, and then I can just set the height to be the height at this zoom level? I have no Idea of this is possible but I can only find results here that involve changing the size of the iframe around the contents. So any advice is appreciated!

Thanks

score 1 · Accepted Answer · edited May 23 '17 at 10:32

There is a zoom property in css, with examples here What Does 'zoom' do in CSS?

You can determine the scale of the zoom by comparing the new window size to the size you designed for, and scaling that way. If you use jQuery, you can detect changes in the resize event of the iFrame window (i think).

// Assuming you've designed your page for a 1024px width
var designWidth = 1024; 
$(window).resize(function () {
    var w = $(window).width();
    /* calculate new zoom */
    var zoom = parseInt(w / designWidth * 100).toString() + "%";

    // Assuming all your content to resize is in an element with id "content"
    $("#content").css("zoom", zoom);
});

A dirty example would be something like:

page1.html

<!DOCTYPE html>
<html>
<body>
<iframe width="50%" src="page2.html"></iframe>
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function () {
    resize();
});

$(document).ready(function(){
    resize();
});

var designWidth = 300;

function resize() {
    var w = $(window).width();
    var zoom = parseInt(w / designWidth * 100).toString() + "%";
    $("#content").css("zoom", zoom);
}
</script>
<div id="content">I get bigger and smaller!</div>
</body>
</html>

This works for me in the latest version of Chrome.

How can I re-size the contents of an iframe based on the size of the iframe?

1 Answers1