html代码如下
<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。