Resize so that whole content just scales down or up</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2015-06-11T05:19:34.153" class="fromnow">Jun 11 '15 at 05:19</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2015-06-11T05:51:28.490" datetime="2015-06-11T05:51:28.490">Jun 11 '15 at 05:51</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 197 times"> <span class="fc-light mr2">Viewed</span> 197 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="30772151" data-ownerid="" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30772151"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I read so many posts about iframe resizing and so on, but I didn't find a solution</p> <p><strong>Problem :</strong> I want to make a webpage in iframe tag to be shown so, as is it - I mean,if we resize the main webpage where the tag is ,the embedded webpage has to be just scaled in or out (automatically) without losing parts of its content. Currently I need a 750x450 webpage(consisting only of a backgroung picture and some interactive buttons on it) that has to be shown in another webpage.Scrolling has to be off.</p> <p>I would be glad to hear your suggestions on how to cope with this problem. Thank you ! </p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/resize" class="post-tag js-gps-track" title="show questions tagged 'resize'" rel="tag">resize</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jun 11 '15 at 05:20">edited Jun 11 '15 at 05:20</time> <a href="../../users/3401528/g-l-p" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3401528.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="G.L.P" /> </a> <div class="s-user-card--info"> <a href="../../users/3401528/g-l-p" class="s-user-card--link">G.L.P</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,119</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="25 silver badges">25</li> <li class="s-award-bling s-award-blingbronze" title="41 bronze badges">41</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-carddeleted"> <time class="s-user-card--time" datetime="asked Jun 11 '15 at 05:19">asked Jun 11 '15 at 05:19</time> <div class="s-avatar s-avatar32 s-user-card--avatar"> </div> <div class="s-user-card--info"></div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-30772151" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="30772151" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-49595432" class="comment js-comment " data-comment-id="49595432" data-comment-owner-id="3401528" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment49595432_30772151"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">share the code / demo which you tried, so we can try to solve</span> – <a href="../../users/3401528/g-l-p" title="7,119 reputation" class="comment-user ">G.L.P</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/30772151/resize-iframe-so-that-whole-content-just-scales-down-or-up#comment49595432_30772151"><span title="2015-06-11T05:21:42.400 License: CC BY-SA 3.0" class="relativetime-clean">Jun 11 '15 at 05:21</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="30772195"></a> <div id="answer-30772195" class="answer " data-answerid="30772195" data-ownerid="1485355" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30772195"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><h2>Option 1</h2> <p>With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:</p> <p><a class="external-link" href="http://getbootstrap.com/components/#responsive-embed" rel="nofollow noreferrer">http://getbootstrap.com/components/#responsive-embed</a></p> <pre><code> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="…"></iframe> </div>  <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="…"></iframe> </div> </code></pre> <h2>Option 2</h2> <p>If you don't want to wrap your iframes, you can use FluidVids <a class="external-link" href="https://github.com/toddmotto/fluidvids" rel="nofollow noreferrer">https://github.com/toddmotto/fluidvids</a>. See demo here: <a class="external-link" href="http://toddmotto.com/labs/fluidvids/" rel="nofollow noreferrer">http://toddmotto.com/labs/fluidvids/</a></p> <pre><code>  <script src="js/fluidvids.js"></script> <script> fluidvids.init({ selector: ['iframe'], players: ['www.youtube.com', 'player.vimeo.com'] }); </script> </code></pre> <p><a href="../../questions/25228056/responsive-iframe-using-bootstrap">Responsive iframe using Bootstrap</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 11:45">edited May 23 '17 at 11:45</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 11 '15 at 05:23">answered Jun 11 '15 at 05:23</time> <a href="../../users/1485355/hardik-gajjar" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1485355.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Hardik Gajjar" /> </a> <div class="s-user-card--info"> <a href="../../users/1485355/hardik-gajjar" class="s-user-card--link">Hardik Gajjar</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,024</li> <li class="s-award-bling s-award-blingsilver" title="12 silver badges">12</li> <li class="s-award-bling s-award-blingbronze" title="27 bronze badges">27</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="30772632"></a> <div id="answer-30772632" class="answer " data-answerid="30772632" data-ownerid="4964136" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30772632"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>just try this code, you need to set width and height in terms of percentage ,then whatever screen it is it will fill up , to disable scrolling just make it "NO".</p> <p>your code will probably look like :</p> <pre><code><iframe name="myIframe" id="myIframe" style="position:fixed;margin-top:0px;width:100%;height:100%" frameborder="0" src="another.html" scrolling="no" runat =server></iframe> </code></pre> <p>paste this code in main.html or whatever , and use another page as iframe page.</p> <p>check demo <a class="external-link" href="http://freebits.gq" rel="nofollow">http://freebits.gq</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 11 '15 at 05:51">answered Jun 11 '15 at 05:51</time> <a href="../../users/4964136/vishwa-ratna" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4964136.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Vishwa Ratna" /> </a> <div class="s-user-card--info"> <a href="../../users/4964136/vishwa-ratna" class="s-user-card--link">Vishwa Ratna</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,567</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="33 silver badges">33</li> <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-30772632" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="30772632" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-49596165" class="comment js-comment " data-comment-id="49596165" data-comment-owner-id="4964136" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment49596165_30772632"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">i have made a demo for it check it :</span> – <a href="../../users/4964136/vishwa-ratna" title="5,567 reputation" class="comment-user ">Vishwa Ratna</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/30772151/resize-iframe-so-that-whole-content-just-scales-down-or-up#comment49596165_30772632"><span title="2015-06-11T05:53:32.937 License: CC BY-SA 3.0" class="relativetime-clean">Jun 11 '15 at 05:53</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>