小编给大家分享一下CSS怎么让iframe实现自适应高度的效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
iframe自适应高度
出于演示目的，本文将使用视频嵌入我们的iframe。首先，访问视频网址，点击视频下的“分享”，然后点击“嵌入”，具体代码如下：
<iframewidth="560"height="315"src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
接下来，我们需要删除width=“560”height=“315”，因为这里是设置iframe的大小。由于我们需要自己设置尺寸，因此我们不需要这样做。
使用CSS
之后，我们需要将iframe放在另一个html元素的<div>中，这是非常重要的，因为这个元素将调整你的iframe大小。然后将CSS类添加到包装的元素中，将一个类添加到iframe，如下所示。
<divclass="resp-container">
<iframeclass="resp-iframe"src="https://www.youtube.com/embed/dQw4w9WgXcQ"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
</div>
使用以下样式定义包装类：
.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实现自适应高度的技巧。正如您所看到的，它实际上非常简单，希望这篇文章可以给你节省数小时的尝试时间。
看完了这篇文章，相信你对“CSS怎么让iframe实现自适应高度的效果”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
