Question

我看了很多关于iframe调整大小的帖子等等，但我找不到解决方案

＆＃xA;＆＃xA;

问题：我想要在iframe标签中显示一个网页，就像它一样 - 我的意思是，如果我们调整标签所在的主网页的大小，嵌入式网页必须只是缩放或缩小（自动）而不会丢失部分内容。目前我需要一个750x450的网页（仅包含背景图片和一些交互式按钮），必须在另一个网页上显示。滚动必须关闭。

＆＃xA;＆＃xA;

我很高兴听到您关于如何解决这个问题的建议。＆＃xA;谢谢！

＆＃XA;

Answer 1

选项1

使用Bootstrap 3.2，您可以将每个iframe包装在您选择的response-embed包装中：

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

选项2

如果您不想包装iframe，可以使用FluidVids https://github.com/toddmotto/fluidvids。请参阅此处的演示：http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

Responsive iframe using Bootstrap

Answer 2

只需尝试此代码，您需要以百分比的形式设置宽度和高度，然后填充任何屏幕，禁用滚动只需将其设为“否”。

您的代码可能如下所示：

app1

将此代码粘贴到main.html或其他任何内容中，并将另一个页面用作iframe页面。

检查演示http://freebits.gq

调整<iframe>的大小，以便整个内容可以缩小或缩小

2 个答案:

选项1

选项2