how to resize an iframe? (css media queries?)

Hi guys I'm looking to resize an iframe depending on size of the browser window, but I'm all turned around as too the height and width. Would REALLY appreciate some explan开发者_运维问答ation on where I'm confused.

I understand how to use css media queries use diff stylesheets according to screen size, but how does this apply to an iframe that's located on another website when I have to predefine the height and the width inside the iframe?

Do you even need the height and width to be defined inside the iframe? Or can you use media queries to detect the size of the browsing windows containing the iframe and then set the height and width values depending on that.

For instance is what's normally in the iframe, but how would I get the iframe to be something like if the other website is brought up on an iphone?

Or am I missing something?

Try setting your iframe height/width to a percentage. Like:

<iframe height="100%" width="100%"></iframe>

That will cause the iframe to expand to it's maximum possible size depending on its parent container.