如今越来越多的人使用手机浏览网页，因此网站的响应能力越来越重要。在手机上测试网站时，尝试了很多次才弄清楚为什么我的视频没有达到我的预期，直到发现了一个很棒的css技巧，可以让iframe实现自适应高度。接下来就和大家分享iframe动态实现自定义高度的方法，感兴趣的小伙伴可以参考借鉴一下。
出于演示目的，本文将使用视频嵌入我们的iframe。首先，访问视频网址，点击视频下的“分享”，然后点击“嵌入”，具体代码如下：
登录后复制
接下来，我们需要删除width =“560”height =“315”，因为这里是设置iframe的大小。由于我们需要自己设置尺寸，因此我们不需要这样做。
使用CSS
立即学习“前端免费学习笔记（深入）”；
之后，我们需要将iframe放在另一个html元素的
中，这是非常重要的，因为这个元素将调整你的iframe大小。然后将CSS类添加到包装的元素中，将一个类添加到iframe，如下所示。
登录后复制
使用以下样式定义包装类：
.resp-container { position: relative; overflow: hidden; padding-top: 56.25%;}
登录后复制
position: relative和iframe的位置在这里非常重要。position: relative以便稍后我们可以将iframe与包装元素相关联。这是因为在CSS中，position: absolute基于最接近的非静态父元素定位元素。
overflow: hidden 是否隐藏任何可能放在容器外面的元素。
padding-top: 56.25%这就是关键所在。在CSS中，padding-top属性可以设置百分比，这使我们的iframe保持正确的比例。通过使用百分比，它将根据元素的宽度计算要使用的填充。在我们的示例中，我们希望保持56.26％的比率，也可以使用其他比率。
按如下方式定义iframe类：
.resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
登录后复制
position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。
top: 0并left: 0用于将iframe定位在容器的中心。
width: 100%并且height: 100%使IFRAME采取所有包装的空间。
完成后，你应该得到一个响应的iframe。
总结：在本文中，我们已经看到了可以让iframe实现自适应高度的技巧。正如您所看到的，它实际上非常简单，希望这篇文章可以给你节省数小时的尝试时间。
【相关教程推荐】
1、CSS教程
2、CSS教程
3、CSS教程
以上就是CSS如何让iframe实现自适应高度的效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3120762.html
