WordPress中设置框架元素iframe自适应宽度和高度

在WordPress网站设计中我们经常通过iframe元素来插入优酷等外部视频元素。在响应式网页布局中，如果我们通过width和height属性指定了iframe的宽度和高度，那么在移动设备上会出现iframe溢出的现象，如下图所示，这样会影响整个网页的布局。

我们可以通过css来控制iframe的样式，使其在WordPress响应式网页中自适应浏览设备的宽度，解决方案如下：

iframe元素本身并无法伸缩，除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe，同时让iframe-container元素的宽度充满包含块的宽度，并且根据iframe的长宽比，设置iframe-container元素的padding-bottom百分比。

其实，这种方式的精髓就在于设置iframe-container元素的padding-bottom属性，设置该属性的目的在于变相的设置元素的高度。因为给padding-bottom设置百分比，是相对于父元素的width而言的，如果对height属性设置百分比，则相对于父元素的height，而父元素的height值我们通常使用默认的auto，因此会出现子元素height也为0.因此，我们只能给padding-bottom设置属性。这样，只需让iframe元素充满iframe-container即可。

可在WordPress主题模板的css样式中加入如下样式代码：

.wrap{
width: 400px;
margin: auto;
border: 5px solid greenyellow;
}
.iframe-container{
height: 0;
padding-bottom: 97.6%;
position: relative;
}
.iframe-container iframe{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 400px) {
.wrap{
width: 300px;
}
}

在插入iframe元素时，采用如下方法调用其样式即可：

采用css样式控制后，iframe可自适应移动设备的大小，效果如下图所示：

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。