Resize Iframe content according to Iframe Width/Height

Question

How do I resize a Iframe's contents to fill the width/height of the Iframe?

I've changed the width and height of the Iframe to make it bigger, however the content is not scaling with it which leaves a bunch of whitespace (It's like the content is absolutely positioned at the top left of the Iframe).

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent">
</iframe>

Why doesn't the Iframe's content scale when you set an Iframe's width/height?

Answer 1

If you don't have control over the content of the iframe (ie you cannot edit the source), you could try to scale the iframe, like this:

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent" 
  style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);">
</iframe>

You should experiment with height , width and the scale value to achieve your desired result.

Also see: Resize external website content to fit iFrame width