如何创建 - 响应式 iframe
了解如何使用 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%;
}
亲自试一试 »
其他纵横比:
