如何創建：響應式 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 寬高比 */
}

親自試一試