如何操作 - 响应式 Iframe

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

响应式 iframe

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

什么是纵横比？

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

操作方法 - 响应式 iframe

步骤1）添加HTML：

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

示例

步骤2）添加CSS：

添加百分比值padding-top保持容器DIV的纵横比。以下示例将创建 16:9 的宽高比，这是 YouTube 视频的默认宽高比。

示例 16:9 纵横比

.container {
position: relative;
overflow: hidden;
  width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
  left: 0;
  bottom: 0;
  right: 0;
width: 100%;
height: 100%;
}

亲自试一试 »

其他长宽比：

示例 4:3 纵横比

.container {
padding-top: 75%; /* 4:3 Aspect Ratio */
}

亲自试一试 »

示例 3:2 纵横比

.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

亲自试一试 »

示例 8:5 纵横比

.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

亲自试一试 »

示例 1:1 纵横比（高度和宽度始终相等）

.container {
padding-top: 100%; /* 1:1 Aspect Ratio */
}

亲自试一试 »