如何 - 响应式内联框架
学习如何使用 CSS 创建响应式 iframe。
响应式 iframe
创建一个 iframe，在调整大小后可以保持纵横比（4:3、16:9 等）
什么是纵横比？
元素的纵横比描述了其宽度与其高度之间的比例关系。两种常见的视频纵横比是 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 的纵横比，这是 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%;
}
自己尝试 »
其他纵横比
