FancyBox iframe高度问题

Question

我正在使用FancyBox iframe显示一些响应式Bootstrap内容。 这在大屏幕上效果很好，可以缩放高度以完全适合内容。 但是，即使响应内容变得更高并且屏幕上有足够的空间让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'
});

提前致谢

Answer 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/#sensitive-embed