文章/答案/技术大牛

发布

社区首页 >问答首页 >响应式iframe到响应式主题

问响应式iframe到响应式主题
EN

Stack Overflow用户

提问于 2014-03-19 10:22:42

回答 3查看 711关注 0票数 1

怎样才能让嵌入式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>

我希望你能帮我解决这个问题。

iframe

回答 3

Stack Overflow用户

发布于 2014-04-29 05:30:23

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

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

票数 0

Stack Overflow用户

发布于 2014-07-29 15:46:52

在保持纵横比的同时，让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/

票数 0

Stack Overflow用户

发布于 2014-08-06 05:29:15

这是我的解决方案>> 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22494988

复制

相似问题

问响应式iframe到响应式主题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式iframe到响应式主题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式iframe到响应式主题
EN