CSS怎么让iframe实现自适应高度的效果
小编给大家分享一下CSS怎么让iframe实现自适应高度的效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
10年积累的成都网站建设、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有南和免费网站建设让你可以放心的选择与我们合作。
iframe自适应高度
出于演示目的,本文将使用视频嵌入我们的iframe。首先,访问视频网址,点击视频下的“分享”,然后点击“嵌入”,具体代码如下:
frameborder="0"gesture="media"allow="encrypted-media"allowfullscreen> 接下来,我们需要删除width=“560”height=“315”,因为这里是设置iframe的大小。由于我们需要自己设置尺寸,因此我们不需要这样做。 使用CSS 之后,我们需要将iframe放在另一个html元素的
使用以下样式定义包装类:
.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实现自适应高度的效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站题目:CSS怎么让iframe实现自适应高度的效果
URL标题:http://myzitong.com/article/igeghc.html