响应式 Iframes 框架

---

了解如何使用 CSS 创建响应式 iframe。

---

响应式 iframe

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

什么是纵横比?

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

---

如何 - 响应式 iframe

步骤 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 的纵横比。

示例 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 纵横比 */
}
亲自试一试 »