操作指南 - 响应式 Iframe
了解如何使用 CSS 创建响应式 iframe。
响应式 Iframes
创建保持纵横比（4:3、16:9 等）的 iframe，使其在调整大小时不变形。
什么是宽高比？
元素的纵横比描述了其宽度和高度之间的比例关系。两个常见的视频纵横比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视以及 YouTube 视频的通用格式）。
如何 - 响应式 Iframes
步骤 1) 添加 HTML
使用容器元素，例如 <div>，并将 iframe 放入其中。
示例
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
步骤 2) 添加 CSS
为 padding-top 设置一个百分比值，以保持容器 DIV 的纵横比。以下示例将创建 16:9 的纵横比，这也是 YouTube 视频的默认纵横比。
示例 16:9 纵横比
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 纵横比 (9 除以 16 = 0.5625) */
}
/* 然后将 iframe 的样式设置为在容器 div 中填充整个高度和宽度 */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
自己动手试一试 »
其他纵横比
