制作响应式 iframe答案

【问题标题】：Making responsive iframe制作响应式 iframe
【发布时间】：2015-12-19 23:43:58
【问题描述】：

我尝试创建一个响应式 iframe，它在 pc 上呈现良好，但如果我们考虑移动设备，它就没有响应性。这是我的jsfiddle

这是我的 HTML

<div class="outer">
<div class="noScrolling">
<iframe class="inner"     src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
</div>

CSS

        .outer{
    position: relative;
    background: url(background-with-backdrop.jpg) no-repeat center;
    background-size: 100% 100%;
        //width:420px;
        height:800px;
    }
     .inner{
     position: relative;
        left: 300px;
        top: 75px;
        width:1050px;
        height:582px;

    }

    .noScrolling{
        width: 1050px; /*or any other size*/
        height: 800px; /*or any other size*/       
        overflow-x:hidden;
        overflow-y:hidden;
    }

【问题讨论】：

你可以控制 iframe 中的内容吗？
不，ifarme 的内容正在从其他站点加载

标签： html css iframe responsive-design

【解决方案1】：

您是否正在尝试做这样的事情？看看这个link 该页面中的 iframe 根据视口的宽度调整大小

看看这个。我给了你我自己解决问题的方法。

编辑

我将尝试解释我的所作所为。

这里的关键是使用百分比而不是像素。像素是绝对的，百分比是相对的，当视口发生变化时似乎效果更好。看起来这是一个单页网站，背景似乎是视口的全尺寸，那么最好使用 vw and vh 单位作为宽度和高度，因为它们会根据您的大小重新调整大小的内容窗口的大小。

现在，如果我们查看 CSS，我已将 body 设置为容器，并分别给它一个 width and height of 100vw, and 100vh。

然后这个容器内的所有其他东西都可以开始使用 body 尺寸的百分比。

body {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}
.outer {
  position: relative;
  background: url("http://wrb.farm/demo/background-with-backdrop.jpg") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.noScrolling {
  width: 100%;
  height: 100%;

}

.inner {
  position: relative;
  width: 54%;
  height: 73%;
  top: 9%;
  left: 23%;
  overflow: hidden;

}

<body>
    <div class="outer">
      <div class="noScrolling">
        <iframe scrolling="no" seamless="seamless" class="inner" src="https://www.initialstate.com/embed/#/tiles/kkCIxiV4PJmg6y88ldn5HvhNiALMBdHp" frameborder="0" allowfullscreen></iframe>
      </div>
  </body>

【讨论】：

我在该站点上看到的唯一 iframe 是 zamorany.com 的 iframe，但是当您在某个断点查看父页面时，它就消失了。还有其他 iframe 吗？
这很漂亮，但我不是OP，是相关代码吗？
@zer00ne 我以为你是 OP。哈哈对不起..我又一次忘记评论更改了啊哈
@zer00ne 是的，我也对此感兴趣。我在几个项目中使用过它们，由于某种原因，它们总是很难使用，因为有些网站是真正的硬代码，而且有时无法删除滚动条，你必须希望这些网站是响应式的，因为在此示例中，如果网站没有响应，它将永远无法正常工作。
@KilvishShakal 我尝试过同样的事情，如果您注意到我也尝试通过iframe 标签这样做。但它似乎不起作用。它似乎是该网站中硬编码的内容，因此除非您控制该网站，否则您无能为力。

【解决方案2】：

作为未来其他人的更新，您可以在本机 javascript 中执行此操作，而无需使用 Responsive Iframes 的框架/库。

【讨论】：

【解决方案3】：

使用名为“响应式 iframe”的工具使响应式 iframe 变得更加容易。

如何使用它：

做起来很简单。只需转到此链接： https://ilav.xyz/responsive-iframe
提供链接和您可能需要的其他一些详细信息。
向下并单击检查复制按钮。
然后将其粘贴到您想要的位置。

检查这个：https://ilav.xyz/html-editor?responsiveiframe

【讨论】：