如何创建：响应式 Iframe

学习如何使用 CSS 创建响应式 iframe。

响应式 iframe

创建一个在调整大小时保持宽高比（4:3、16:9 等）的 iframe：

什么是宽高比？

元素的宽高比描述的是其宽度和高度之间的比例关系。两种常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视以及 YouTube 视频的通用格式）。

How To - 响应式 Iframes

第一步 - 添加 HTML：

使用容器元素，例如 <div>，并在其中添加 iframe：

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

第二步 - 添加 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%;
}

亲自试一试

其他宽高比

实例 - 4:3 宽高比

.container {
  padding-top: 75%; /* 4:3 宽高比 */
}

亲自试一试

实例 - 3:2 宽高比

.container {
  padding-top: 66.66%; /* 3:2 宽高比 */
}

亲自试一试

实例 - 8:5 宽高比

.container {
  padding-top: 62.5%; /* 8:5 宽高比 */
}

亲自试一试

实例 - 1:1 宽高比（高度和宽度始终相等）

.container {
  padding-top: 100%; /* 1:1 宽高比 */
}

亲自试一试