Resize external website content to fit iFrame width

javascript html css iframe web
Tahin Rahman picture Tahin Rahman · Jul 8, 2012 · Viewed 152.5k times · Source

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)?

Answer

Luca picture Luca · Jul 8, 2012

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>

Related questions

Full-screen iframe with a height of 100%

Is iframe height=100% supported in all browsers? I am using doctype as: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> In my iframe code, if I …

Read More
cross-domain iframe resize

How do I resize an iframe from another domain -Edit Scroll down for some solutions.. or read on how NOT to do this :D After many hours of code hacking- the conclusion is that anything inside the iframe is not …

Read More
Is an empty iframe src valid?

I want an iframe to initially have src as blank and then once the page loads; call a JS function and then set the src value to an actual one.. So is <iframe src="#" /> valid OR do I …

Read More