【CSS】一个自适应大小的父元素，如何让子元素的宽高比一直是2:1

父元素是自适应大小的容器（比如 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。