Bootstrap响应iframe没有调整大小

Question

我正在使用bootstrap框架开发响应式网页,我想放置一个响应式iframe.

bootstrap文档说我可以使用响应式16x9宽高比iframe

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

和css(包含在bootstrap.css中)是

.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}

.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

结果是iframe的容器(具有类"嵌入响应......"的div)是响应的.这取决于分辨率的正确宽度和高度.但是iframe溢出了,因为它没有调整大小.

如何调整iframe的大小以准确填充div？

Answer 1

我也有这个问题.我找到了一个有点破解的解决方案.在iframe部分:width:100%所以它应该如下所示:

<iframe class="embed-responsive-item" src="…" width="100%"></iframe>

我必须为我的高度设置一个固定值,因为iframe源没有响应.

希望有所帮助.