我正在使用 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 的容器(类为“embed-responsive...”的 div)是响应式的。这会根据分辨率采用正确的宽度和高度。但是 iframe 溢出了,因为它没有调整大小。
如何调整 iframe 的大小以完全填充 div?
最佳答案
我也遇到了这个问题。我找到了一个有点破解的解决方案。在 iframe 部分:width:100%
所以它应该看起来像:
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
我必须为我的高度设置一个固定值,因为 iframe 源没有响应。
希望对您有所帮助。
关于html - Bootstrap 响应式 iframe 不调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24813918/