aspect-ratio 在 chrome 103+ 和 safari 15.4+ 才真正可用，firefox 需开启实验性 flag 且默认关闭，ie 全系不支持；兼容方案首选 padding-bottom 百分比法，需父容器设 relative 与 padding-bottom，子元素绝对定位填充，且须注意 box-sizing 和声明顺序。
aspect-ratio 在 Chrome 103+ 和 Safari 15.4+ 才真正可用
如果你在 Firefox 或旧版 Edge 里写 aspect-ratio: 16 / 9 却没效果，不是写错了，是浏览器根本不支持。Firefox 目前（2024）仍靠 aspect-ratio 的实验性 flag 开启，且默认关闭；IE 全系不支持，连 fallback 都得手动写。
常见错误现象：div { aspect-ratio: 1 / 1; width: 100%; } 在 Firefox 中盒子高度塌陷为 0。
- 使用场景：卡片容器、视频占位、响应式正方形头像框
- 兼容方案必须存在——不能只依赖
aspect-ratio - 不要用
min-height或height: 0混搭padding-bottom后再加aspect-ratio，两者逻辑冲突，后者会被忽略
padding-bottom 百分比方案仍是最稳的降级写法
原理是利用「块级元素内 padding 的百分比值，始终相对于其包含块的宽度计算」，从而实现宽高联动。它不依赖现代 CSS，所有浏览器都认。
示例：一个 16:9 的响应式盒子
div.aspect-box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
}
div.aspect-box > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 百分比值 =
height / width * 100%，别手算错（比如 4:3 是 75%，不是 133%） -
padding-bottom必须作用在「父容器」上，内容要绝对定位塞进去 - 如果子元素有 margin 或 border，会撑开父容器高度，破坏比例——此时需用
box-sizing: border-box控制
aspect-ratio 和 padding-bottom 能不能共存？能，但要按优先级写
可以写成「现代写法优先 + 降级兜底」，但顺序和写法很关键：CSS 会按声明顺序覆盖，且部分浏览器对 aspect-ratio 解析后会重置内部高度计算逻辑。
- 正确写法：先写
aspect-ratio，再写padding-bottom作为 fallback（支持者忽略后者，不支持者取后者） - 错误写法：把
padding-bottom写在前面，然后加aspect-ratio—— 在 Safari 15.4+ 中，padding-bottom会被无视，但盒子高度可能意外变矮 - 不要给同一元素同时设
height和aspect-ratio，后者会失效；也不要设min-height干扰比例计算
用 aspect-ratio 做正方形时，width 不是必须 100%
很多人以为 aspect-ratio 只能配合流式宽度用，其实它只要知道一个尺寸（width 或 height），就能推另一个。你可以固定宽、让高自适应；也可以固定高、让宽自适应。
比如做图标容器，希望始终是 1:1，且最大宽 64px：
.icon-box {
width: min(64px, 100%);
aspect-ratio: 1 / 1;
}
- 这种写法在支持浏览器中，
height会严格等于当前width，无需 JS 或伪元素 - 注意：如果父容器 width 为 auto（比如 inline 元素），
aspect-ratio可能无法触发——它需要至少一个确定的尺寸作为基准 - Flex 或 Grid 容器中使用时，确保父项没设
align-items: stretch以外的值，否则可能压制高度计算
真正容易被忽略的是：aspect-ratio 不影响盒模型本身，它只决定「用于布局的高度」；如果你加了 border、padding，又没设 box-sizing: border-box，视觉比例就会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
