以通过以下方式实现前端让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








![表情[ciya]-红穆笔记](https://www.4s5.cn/wp-content/themes/zibll/img/smilies/ciya.gif)
![表情[xia]-红穆笔记](https://www.4s5.cn/wp-content/themes/zibll/img/smilies/xia.gif)


暂无评论内容