最可靠的方式是利用::before伪元素占位+padding-top百分比（基于父宽），内容绝对定位填充；padding-top值=(高/宽)×100%，如16:9为56.25%；需配合width/height 100%与object-fit控制子内容，兼容性优于aspect-ratio。
用 ::before + padding-top 实现宽高比容器
纯 CSS 实现响应式比例容器，最可靠的方式是利用 ::before 伪元素占位 + padding-top 百分比基于宽度的特性。这不是 hack，是 CSS 规范明确支持的行为。
常见错误是直接给容器设 height: 56.25%（16:9），结果高度不随宽度变化——因为百分比高度在非绝对定位子元素中无效，浏览器会当成 0 处理。
-
padding-top或padding-bottom的百分比值，始终相对于父容器的 宽度 计算，这是关键 - 必须把内容区域设为
position: absolute，否则伪元素占位后内容会换行或溢出 - 容器本身需设
position: relative，否则绝对定位的内容会脱离预期范围
div.aspect-ratio-16x9 {
position: relative;
width: 100%;
}
div.aspect-ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
div.aspect-ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}不同宽高比怎么算 padding-top 值
数值不是凭感觉填的，得按公式： (height / width) × 100%。填错会导致容器被压扁或拉长，尤其在移动端缩放时更明显。
- 4:3 →
75%（3 ÷ 4 = 0.75） - 16:9 →
56.25%（9 ÷ 16 = 0.5625） - 1:1 →
100% - 21:9（超宽屏）→
42.857%（9 ÷ 21 ≈ 0.42857）
注意：别用小数点后太多位，CSS 解析精度有限，保留 3~4 位足够；也不建议用 calc() 动态算，增加重排开销且无必要。
立即学习“前端免费学习笔记（深入）”；
嵌套视频或图片时，object-fit 和 width/height 怎么配
容器比例固定了，但里面的内容（比如 <img alt="CSS伪元素实现响应式比例容器_保持图片/视频固定宽高比" > 或 <video></video>）默认会拉伸变形。靠 object-fit 控制裁剪/缩放方式，但必须配合尺寸声明才生效。
- 只写
object-fit: cover不管用——元素本身没设width: 100%; height: 100%，它就按原始尺寸渲染 -
object-fit: contain适合需要完整展示内容的场景（如图表、图标），但可能留白 - 移动端 Safari 对
object-fit支持良好，但老版 Android Webview（≤4.4）不支持，得用 JS fallback 或 background-image 替代
img, video {
width: 100%;
height: 100%;
object-fit: cover;
}为什么不用 aspect-ratio 属性？
虽然现代浏览器已支持 aspect-ratio，但它在部分场景下仍不可靠：
- Firefox ≤ 89 不支持，iOS Safari ≤ 15.4 需加
-webkit-前缀（且行为不一致） - 当容器父级有
flex或grid布局干扰时，aspect-ratio可能被忽略或计算异常 - 服务端渲染（SSR）或静态生成站点中，若 JS 未加载完，
aspect-ratio容器可能闪动或塌陷，而伪元素方案天然无 JS 依赖
真要用 aspect-ratio，至少得加一层 @supports (aspect-ratio: 1/1) 检测，再 fallback 到伪元素方案——等于多写一倍代码，收益不大。
实际项目里，只要兼容性要求覆盖到 iOS 14 或 Android 6，就别省这点事，老老实实用 ::before。
