FancyBox iframe 高度问题

Posted 2023-05-09

【中文标题】FancyBox iframe 高度问题

【英文标题】：FancyBox iframe height issue

【发布时间】：2015-10-04 19:24:52

【问题描述】：

我正在使用 FancyBox iframe 来显示一些响应式引导内容。这在大屏幕上效果很好，可以缩放高度以完全适合内容。然而，相同的高度在较小的设备上使用，即使响应式内容变得更高并且屏幕上有足够的空间让 iframe 更高？看起来 FancyBox 正在查找内容的全宽版本的高度，即使显示的是较窄/较高的版本？

查看这些屏幕截图： https://www.dropbox.com/s/2lfr5onr3ilmpkk/Screen%20Shot%202015-07-16%20at%2018.31.57.png?dl=0

https://www.dropbox.com/s/6t4jn1abtrqr17h/Screen%20Shot%202015-07-16%20at%2018.32.11.png?dl=0

有人对解决方案有任何建议吗？

这是我的代码：

$(".fancyiframe").fancybox( 
    maxWidth: '100%',
    height: 'auto',
    fitToView: false,
    autoHeight: true,
    type: 'iframe'
);

提前致谢

【参考方案1】：

Bootstrap 附带了一些类来帮助响应式嵌入，这可能会对您有所帮助。

 <!-- 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>

参考：http://getbootstrap.com/components/#responsive-embed

【讨论】：

感谢 Christopher，但内容不是视频，也没有内在比例。我认为问题出在 FancyBox 上？