Question

如何让嵌入式iframe像我的网站主题一样响应？我通过iframe有一个计算器。但即使我放置了这个CSS

之后它也没有遵循主题响应

iframe，object，embed {max-width：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>

我希望你能帮助我。

Answer 1

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

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

Answer 2

我在聚会上有点迟，但无论如何都决定做出贡献。在保持纵横比的同时，使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%;
}

您可以通过调整容器的padding-bottom属性来更改宽高比。

这是一个可以玩的小提琴：http://jsfiddle.net/dWrR2/

Answer 3

这是我的解决方案＆gt;＆gt; iframe + jquery，像魅力一样工作。 jsfiddle＆gt;＆gt; 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>

响应式iframe响应主题

3 个答案: