以通过以下方式实现前端让iframe框架内的内容高宽撑开:
- 在iframe标签中设置
scrolling="no"
和frameborder="0"
,禁用滚动条和边框。 - 在iframe标签后添加一个
<div>
,并给该<div>
设置样式position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
。其中,padding-bottom
的值应该是iframe内嵌内容的纵横比例(例如16:9的视频应该设置为padding-bottom: 56.25%
)。 - 使用绝对定位在上述
<div>
内部放置一个子元素,并设置其样式为position: absolute; top: 0; left: 0; width: 100%; height: 100%;
。
完整代码示例如下所示:
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe src="https://example.com" frameborder="0" scrolling="no"></iframe>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容