现代项目优先用 aspect-ratio，老浏览器需降级为 padding-bottom 或 vw；scss 无法动态获取容器宽算高，其“动态”仅为编译时静态计算，响应式高度必须依赖 css 运行时机制。
直接说结论：现代项目优先用 aspect-ratio，老浏览器兜底才考虑 padding-bottom 或 vw 计算；SCSS 本身不能动态读取容器宽度来算高度，所谓“SCSS 动态高度”只是编译时静态计算，真要响应式还得靠 CSS 运行时机制。
aspect-ratio 是首选，但必须配 width 或 max-width
它专为解决宽高比问题而生，一行代码就能替代过去一堆 hack：
-
aspect-ratio: 16/9比aspect-ratio: 1.777更安全——分数写法无浮点精度误差 - 必须显式设置
width（如width: 100%），否则容器可能坍缩为 0 或撑满视口 - 不能和
height同时设具体值（比如height: 200px），否则aspect-ratio被浏览器忽略 - 在 Flex/Grid 容器里，如果子项被压缩，检查父容器是否设置了
flex-shrink: 0，否则比例会失真
padding-bottom 技巧还在用，但要注意 height: 0
这是兼容 IE11 的主流 fallback 方案，核心是利用「子元素 padding 百分比基于父宽计算」这一特性：
- 父容器设
position: relative，子占位元素设padding-bottom: 56.25%（对应 16:9） - 必须加
height: 0，否则 padding 会叠加在原有高度上，导致容器过高 - 内容要绝对定位进这个占位区：
position: absolute; top: 0; left: 0; right: 0; bottom: 0 - 别漏
box-sizing: border-box，否则边框会让实际尺寸超标
vw 单位能算高度，但只适合固定宽高比 + 视口级布局
比如一张 884×455 的图，宽高比是 455/884 ≈ 51.5%，那么：
-
height: 51.5vw确实能让容器始终等比缩放，且不依赖图片加载 - 问题在于：它绑定的是视口宽度，不是父容器宽度——嵌套在窄 sidebar 里就会错乱
- 移动端横竖屏切换时，
vw值突变，可能引发布局抖动 - 不适合 Grid/Flex 子项，因为它们的宽度由布局算法决定，不一定等于视口宽度
SCSS 不能实时获取容器宽来算高，别被“动态”误导
所有 SCSS 变量、函数（比如 calc(100vh - 42px)）都是编译时确定的，运行时不会重算：
-
$ratio: 16/9;→ 编译后就是aspect-ratio: 16/9，没任何“动态”成分 - 想让高度随父容器宽度变化？SCSS 做不到，只能靠
aspect-ratio或padding-bottom这类 CSS 运行时机制 - 有人用
calc(#{$height} * #{$ratio})，这只是把数学运算提前到编译阶段，结果仍是静态值
真正容易被忽略的是：当 aspect-ratio 和 min-width 共存时，浏览器会优先满足最小宽度，导致高度被强行拉高、比例崩坏。这不是 bug，是规范行为——比例约束只在尺寸可自由伸缩时生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
