操作指南 - 響應式 Iframe
瞭解如何使用 CSS 建立響應式 iframe。
響應式 Iframes
建立保持縱橫比（4:3、16:9 等）的 iframe，使其在調整大小時不變形。
什麼是寬高比？
元素的縱橫比描述了其寬度和高度之間的比例關係。兩個常見的影片縱橫比是 4:3（20 世紀的通用影片格式）和 16:9（高畫質電視和歐洲數字電視以及 YouTube 影片的通用格式）。
如何 - 響應式 Iframes
步驟 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%;
}
自己動手試一試 »
其他縱橫比
