Log in

View Full Version : 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

<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


<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?
molendijk
08-06-2019, 06:16 PM
There's more than one way to do it. Please give me the link to your page containing the iframe.