详情页

海洋cms 如何让ifream框架内的内容高宽撑开?

时间:2023年10月01日

编辑:佚名

以通过以下方式实现前端让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://baidu.com" frameborder="0" scrolling="no"></iframe>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>
相关文章
猜你需要