Question

我尝试创建一个响应式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;
    }

Answer 1

你试图做这样的事吗？看看这个link 该页面中的iframe根据视口宽度

调整大小

检查一下..我给你自己实现了你的问题。

修改

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

这里的关键是使用百分比而不是像素。像素是绝对的，百分比是相对的，当事物随视口变化时似乎效果更好。并且它似乎是一个单页网站，并且背景似乎是视口的全尺寸，然后最好使用vw and vh单位作为宽度和高度，因为它们根据您的尺寸重新缩放尺寸的内容到了窗户的大小。

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

然后，此容器内的所有其他内容都可以开始使用正文维度的百分比。

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>

Answer 2

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

Answer 3

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

如何处理：

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

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

制作响应式iframe

3 个答案: