javascripthtmlcssiframe

Resize external website content to fit iFrame width


I have a webpage with 2 iFrames in it. Both of them are with fixed width and height. I am loading external websites inside them. How can I resize those external websites width to fit with the iFrame (like mobile browsers does by changing viewport)?


Solution

  • What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.

    E.g.

    <iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>