固定大小的iframe在響應式設計中

我有一對http://snapwidget.com的iframe。問題在於它們的尺寸是固定的，並且與twitter引導程序不搭配。有沒有辦法讓他們調整大小？或者至少我的其他divs在屏幕大小發生變化時不會與其重疊，而是圍繞它們移動？固定大小的iframe在響應式設計中

的index.html

<div class="container"> 
     <div class="row"> 
      <div class="span8 stayright"> 
       <!-- SnapWidget desktop--> 
       <div class="instagram_desktop"> 
        <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe> 
       </div> 
       <!-- SnapWidget ipad--> 
       <div class="instagram_inbetween">   
        <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NjIwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:620px; height: 620px" ></iframe> 
       </div> 
       <!-- SnapWidget ipad profile--> 
       <div class"instagram_ipad_p"> 
        <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NDc2fDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:476px; height: 476px" ></iframe> 
       </div> 
       <!-- SnapWidget iphone--> 
       <div class"instagram_iphone" 
        <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58MzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:370px; height: 370px" ></iframe> 
       </div> 
      </div> 
      <div class="span4 stayleft small1"> 
       <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370"> 
      </div> 
      <div class="span4 stayleft small2"> 
       <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370"> 
      </div> 
      <div class="span8 big2"> 
       <!-- SnapWidget --> 
       <iframe src="http://snapwidget.com/in/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzYwfDF8MXx8eWVzfDB8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe> 
      </div> 

      <div class="span4 r2 small1"> 
       <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370"> 

      </div> 
      <div class="span4 small2"> 
       <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370"> 

      </div> 

      <div class="span4 r3 small1"> 
       <h2>Something Else</h2> 
       <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
      </div> 
     </div> 
</div>

CSS

.stayright { 
    float: right; 
    height: 100%; 
    padding-bottom: 25px; 
} 

.stayleft { 
    float: left; 
    height: 100%; 
} 

.small1 { 
    padding-bottom: 15px; 
} 

.small2 { 
    padding: 15px 0 25px 0; 
} 

.big2 { 
    padding: 25px 0px; 
} 

.r2 .small1 { 
    padding-bottom: 15px; 
} 

.big2 { 
    margin-top: -25px; 
} 

@media (min-width: 1024px) { 
.instagram_iphone { display: none !important; } 
.instagram_ipad_p { display: none !important; } 
.instagram_inbetween { display: none !important; } 
.instagram_iphone_ls { display: none !important; } 
} 

@media all and (max-width: 1023px) and (min-width: 769px) { 
.instagram_iphone { display: none !important; } 
.instagram_ipad_p { display: none !important; } 
.instagram_desktop { display: none !important; } 
.instagram_iphone_ls { display: none !important; } 
} 

@media all and (max-width: 768px) and (min-width: 481px) { 
.instagram_desktop { display: none !important; } 
.instagram_inbetween { display: none !important; } 
.instagram_iphone { display: none !important; } 
.instagram_iphone_ls { display: none !important; } 
} 

@media all and (max-width: 480px) and (min-width: 321px) { 
.instagram_desktop { display: none !important; } 
.instagram_ipad_p { display: none !important; } 
.instagram_inbetween { display: none !important; } 
.instagram_iphone { display: none !important; } 
} 

@media (max-width: 320px) { 
.instagram_iphone_ls { display: none !important; } 
.instagram_desktop { display: none !important; } 
.instagram_inbetween { display: none !important; } 
.instagram_ipad_p { display: none !important; } 
}

來源

2013-05-03 Jadam

您是否嘗試過在'style'屬性中使用％值？ – 2013-05-03 17:56:55

@ Karl-AndréGagnon我有。 iframe停留在輸出尺寸。除非我需要把它放在與其他東西有關的％？我不知道該怎麼做，或者如果這就是你應該做的。 – Jadam 2013-05-03 18:25:50

嘗試這個CSS來查看它是否工作：'iframe {width：100％！important;}'！important不是一個好方法，但我喜歡它來測試CSS覆蓋。 – 2013-05-03 18:35:37

好了，找小部件後，我能夠調整它的大小，但部件心不是內部響應所以它沒用。

唯一的其他可能的方式是，你正在使用（mediaqueries）的一個，但它不工作的那些原因有二：

<!-- SnapWidget ipad profile--> 
      <div class"instagram_ipad_p">

類是缺少=（class=""）

<!-- SnapWidget iphone--> 
      <div class"instagram_iphone"

div未結束（<div>），班級缺少an =。

經過這些修改之後，您的媒體查詢將會正常工作！ Fiddle

來源

2013-05-03 22:57:09

jQuery有這個所謂的大小調整好的方法。你可以做類似的事情。（代碼沒有測試）

//initially set the iframe's width to the window size 
mtarget = getElementById... //get the iframe 
mtarget.width = $(window).width; 

$(window).resize(function() { 
//and again...set the width of the iframe to $(window).width()...? 
});

從理論上講，這應該有助於你的iframe放置好的

來源

2013-05-03 17:58:04 blackhawk

我仍然很綠，當涉及到網頁設計。我知道最小的jQuery，但我會玩這個並看看。目前我正在嘗試設置多種尺寸的iframe並在媒體查詢中調用它們。 – Jadam 2013-05-03 18:28:01

固定大小的iframe在響應式設計中

回答

相關問題