父元素是自適應大小的容器（比如 width:100%），我們希望子元素 始終保持 2:1 寬高比（比如寬 200px → 高 100px，寬 300px → 高 150px）。

有幾種常見解法：

---

? 方法一：CSS aspect-ratio（推薦，現代瀏覽器）

<div class="parent"><div class="child"></div>
</div>

.parent {width: 100%;      /* 父元素寬度自適應 */max-width: 600px; /* 可選：限制最大寬度 */
}.child {aspect-ratio: 2 / 1;  /* 寬高比 2:1 */width: 100%;          /* 填滿父容器 */background: lightblue;
}

👉 好處：代碼最簡潔，瀏覽器原生支持比例。
👉 兼容性：Chrome 88+、Safari 14.1+、Firefox 89+。

---

? 方法二：padding 百分比法（兼容性好）

利用 padding-top 是基于 父元素寬度 的特性：

<div class="parent"><div class="child"><div class="content">內容</div></div>
</div>

.parent {width: 100%;max-width: 600px;
}.child {width: 100%;padding-top: 50%;  /* 高度 = 寬度 * 0.5（即 2:1），撐開的高度 */position: relative;background: lightcoral;
}.content {position: absolute; /* 讓子內容覆蓋在容器里 */top: 0;left: 0;width: 100%;height: 100%;
}

👉 原理：2:1 → 高度 = 寬度 / 2 → padding-top: 50%。
👉 優點：兼容所有瀏覽器。
👉 缺點：需要額外一層定位來放實際內容。

---

? 方法三：JS 動態設置（不推薦，除非要兼容特別老的瀏覽器）

function resize() {const parent = document.querySelector('.parent');const child = document.querySelector('.child');const width = parent.offsetWidth;child.style.height = width / 2 + "px"; // 寬高比 2:1
}window.addEventListener("resize", resize);
resize();

👉 不推薦，性能差，維護成本高。

---

🔑 總結

• 現代瀏覽器 → 用 aspect-ratio，最簡潔。
• 要兼容老瀏覽器 → 用 padding-top 技巧。
• 特殊情況（比如需要動態計算） → 用 JS。