auto resizing an iframe to fit its content

**suzanbra** · 09-11-2018, 05:16 AM

I'm looking for something as the title that actually work for all the browser. I've searched all over the web and they all work more than perfect on Explorer and FireFox but not on Chrome.

Can u guys help me?

**mlegg** · 09-11-2018, 05:11 PM

Do you have any code yet? Do you have this in the <head> tag

Code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Are you using anything like Bootstrap or another system?

**molendijk** · 09-11-2018, 06:45 PM

Did you test them using Chrome online? I am saying this because Chrome does not execute javascript on the hard disk when it is related to iframes.

**amzoun95** · 03-04-2019, 10:16 PM

If you want only to fit the size of the iframe then check this below code in html

HTML

Code:

<div id="output" style="width:500px;height:400px;">
    <iframe src="www.google.com" style="width:100%;height:100%;" id="ifrm"></iframe>
</div>
If you want the content also to be shrinked, then use the css transform as below

CSS

#ifrm {
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Safari */
    transform: scale(0.5);
}

**Kamphagma** · 08-06-2019, 02:39 PM

I thought the iframe was finished but its an important part of html5. Could be useful...

But onto more important thing; I have google search results on a site, and Ive resized the iframe to fit my page with sidebar so it looks OK on my 1024px laptop. Is there a way to dynamically resize this, so it looks better on most screens?