CODEWITHSUNDEEP
htmliframeresize
Fero
Fero

Reputation: 13315

How to set iframe size dynamically

How should I set the dimensions of an iframe dynamically, so the size is flexible for different viewport sizes?

For example:

<iframe src="html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

In this case the height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window.

At any size, the iframe aspect ratio should be the same. How can this be done?

Upvotes: 30

Views: 214777

Answers (7)

RSK
RSK

Reputation: 21

This can now be accomplished with CSS aspect-ratio!

Set the desired width on the iframe (e.g., 100%) and then set an appropriate aspect ratio for your content.

iframe {
   aspect-ratio: 4 / 3;
   width: 100%;
}

The browser will scale the content automatically based on the aspect ratio.

You may also want to set min/max width or height depending on your content.

You can calculate a custom aspect ratio yourself or use an online utility like this one Aspect Ratio Calculator.

Upvotes: 2

Yaakov Bressler
Yaakov Bressler

Reputation: 12038

Latest css rules will allow you to do use viewport directly, like so:

<iframe src="html_intro.asp" width="100vw" height="50vh">
  <p>Hi SOF</p>
</iframe>

I personally like to adjust for iframes by manipulating their parent containers:

<div class='iframe-parent'>
  <iframe src="html_intro.asp">
    <p>Hi SOF</p>
  </iframe>
</div>

Now the css:

.iframe-parent{
  width: 100vw;
  height: 50vh;
}

/* Expand to the entire container */
iframe{
  width: 100%;
  height: 100%;
}

Upvotes: 1

Ashish Garg
Ashish Garg

Reputation: 37

The height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window

<!DOCTYPE html>
    <html>
    <body>
    
    <center><h2>Heading</h2></center>
    <center><p>Paragraph</p></center>
    
    <iframe src="url" height="600" width="1350" title="Enter Here"></iframe>
    
    </body>
    </html>

Upvotes: -4

Rocco The Taco
Rocco The Taco

Reputation: 3777

I've found this to work the best across all browsers and devices (PC, tables & mobile).

<script type="text/javascript">
                      function iframeLoaded() {
                          var iFrameID = document.getElementById('idIframe');
                          if(iFrameID) {
                                // here you can make the height, I delete it first, then I make it again
                                iFrameID.height = "";
                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
                          }   
                      }
                    </script> 


<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe>

Upvotes: 2

Lamecarlate
Lamecarlate

Reputation: 121

Have you tried height="100%" in the definition of your iframe ? It seems to do what you seek, if you add height:100% in the css for "body" (if you do not, 100% will be "100% of your content").

EDIT: do not do this. The height attribute (as well as the width one) must have an integer as value, not a string.

Upvotes: 3

Naveen Velaga
Naveen Velaga

Reputation: 646

If you use jquery, it can be done by using $(window).height();

<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>

Upvotes: 37

Graeme Leighfield
Graeme Leighfield

Reputation: 2985

Not quite sure what the 300 is supposed to mean? Miss typo? However for iframes it would be best to use CSS :) - Ive found befor when importing youtube videos that it ignores inline things. 

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>

Upvotes: 15

Related Questions