如何 - 寬高比
學習如何使用 CSS 保持元素的寬高比。
寬高比
建立靈活的元素，在調整大小時能保持其寬高比（4:3、16:9 等）
什麼是寬高比？
元素的寬高比描述了其寬度和高度之間的比例關係。兩個常見的影片寬高比是 4:3（20 世紀的通用影片格式）和 16:9（高畫質電視和歐洲數字電視的通用格式，也是 YouTube 影片的預設格式）。
如何 - 高等於寬
步驟 1) 新增 HTML
使用容器元素，例如 <div>，如果要在其中包含文字，請新增一個子元素
示例
<div class="container">
<div class="text">一些文字</div> <!-- 如果要在容器中包含文字 -->
</div>
步驟 2) 新增 CSS
為 padding-top 設定百分比值以保持 DIV 的寬高比。以下示例將建立一個 1:1 的寬高比（高度和寬度始終相等）
示例 1:1 寬高比
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 寬高比 */
position: relative; /* 如果要在其中包含文字 */
}
/* 如果要在容器中包含文字 */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
自己動手試一試 »
其他寬高比
aspect-ratio CSS 屬性
在較新的瀏覽器中，您可以直接使用 CSS aspect-ratio 屬性
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
