javascript - 调整 <iframe> 的大小，以便整个内容按比例缩小或放大

Question

看了很多关于iframe resizing等等的帖子，都没有找到解决办法

问题: 我想在 iframe 标签中制作一个网页，这样显示 - 我的意思是，如果我们调整标签所在的主网页的大小，则嵌入式网页必须是只是(自动)缩小或缩小而不丢失其部分内容。目前我需要一个 750x450 的网页(仅由背景图片和上面的一些交互式按钮组成)必须显示在另一个网页中。滚动必须关闭。

我很高兴听到您关于如何处理这个问题的建议。谢谢 !

Answer 1

选项1

使用 Bootstrap 3.2，您可以将每个 iframe 包装在您选择的响应式嵌入包装器中:

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