對響應式主題的響應式iframe

如何使嵌入式iframe能夠像我的網站主題一樣響應？我有一個通過iframe的計算器。但是，這並不即使我把這個CSS對響應式主題的響應式iframe

的iframe，對象，嵌入主題響應{最大寬度：100％;}

這裏是嵌入式的iframe代碼

<iframe style="border: currentColor; width: 375px; height: 800px; margin-top: -159px; margin-left: 410px; position: relative;" src="http://www.calculator-bmi.com/wp-content/themes/genesis-flint/js/" height="240" width="320"></iframe>

我希望你能幫助我。

來源

2014-03-19 user3416962

iframe, object, embed { 
    width: 100% !important; 
    height: 800px !important; 
    margin: 0 !important; 
    border: none; 
}

例子：http://jsfiddle.net/d6ufL/

來源

2014-04-28 21:30:23 Raul

我有點遲到了，但決定無論如何作出貢獻。使iframe在水平和垂直方向響應，同時保持寬高比，有點棘手。

你的HTML應該有一個IFRAME的容器：

<div class="embed-container-noframe"> 
    <iframe src="http://www.calculator-bmi.com/wp-content/themes/genesis-flint/js/"></iframe> 
</div>

這裏是爲使其填充可用整個空間水平，同時保持相同的寬高比的CSS：

.embed-container-noframe { 
    height: 0; 
    width: 100%; 
    padding-bottom: 70%; 
    overflow: hidden; 
    position: relative; 
} 

.embed-container-noframe iframe { 
    width: 100%; 
    height: 100%; 
}

你可以通過調整容器的填充底部屬性來更改寬高比。

這裏玩一的jsfiddle：http://jsfiddle.net/dWrR2/

來源

2014-07-29 07:46:51 jesseniem

這裏是我的解決方案>> IFRAME + jQuery和像一個魅力的工作。 jsfiddle >>http://jsfiddle.net/leowebdev/6NSX3/

<html lang="en" class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
     <style> 
     html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     var calcHeight = function() { 
      $('#preview-frame').height($(window).height()); 
     } 

     $(document).ready(function() { 
      calcHeight(); 
     }); 

     $(window).resize(function() { 
      calcHeight(); 
     }).load(function() { 
      calcHeight(); 
     }); 
     </script> 
    </head> 
    <body> 
     <iframe id="preview-frame" src="http://yourwebsitehere.com/" name="preview-frame" frameborder="0" noresize="noresize"> 
     </iframe> 
    </body> 
</html>

來源

2014-08-05 21:29:15 leowebguy

對響應式主題的響應式iframe

回答

相關問題