aspect-ratio 是原生 CSS 属性，Less 仅能安全输出，需显式设置 width 才生效；不适用于 img/video 等替换元素，须用 wrapper 包裹并配合 object-fit 使用。
aspect-ratio 不能在 Less 中“生成”或“模拟”，它就是原生 CSS 属性，Less 只能安全地输出它——前提是你的目标浏览器支持。别指望 Less 编译时帮你算高度、补 fallback 或做运行时判断。
直接写 aspect-ratio: 16 / 9 就行，但必须配 width
很多人写了 aspect-ratio 却没效果，根本原因是容器没明确宽度约束：
-
aspect-ratio是按“已知宽度 → 算出高度”，不设width（或max-width、flex-basis等）时，浏览器连“宽多少”都不知道，自然无法推高 - 在 flex 或 grid 容器中，尤其要避免只写
aspect-ratio而不控制主轴尺寸，Safari 15.4–16.3 会直接忽略 - 不要写成
aspect-ratio: 16/9（斜杠紧贴数字），必须有空格：aspect-ratio: 16 / 9，否则部分旧版解析器会失败
Less 里用 @supports 做降级很危险
Less 不支持在 @supports 块内调用 mixin，而且 @supports not (aspect-ratio: 1 / 1) 这类写法在 Safari 15.3 及更早版本中根本无效——它不识别无单位的 1 / 1，也不报错，只是静默跳过。
- 真正可用的检测是
@supports not (aspect-ratio: 16 / 9)，但 iOS 14.x 和多数安卓 WebView 仍不支持该语法 - 生产环境建议放弃
@supports自动降级，改用 JS 运行时检测后加 class，或直接为老设备硬编码 padding-bottom fallback - 如果你坚持用 Less 输出 fallback，得把两套样式分开写死：
.card主规则用aspect-ratio，再单独写一个.card--legacy类含padding-bottom+position: relative结构
aspect-ratio 对 <img> 和 <video> 无效
替换元素（replaced elements）如 <img>、<video> 的固有宽高比由其内容决定，aspect-ratio 不参与计算，写了也进不了 computed styles。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用块级 wrapper 包裹，例如
.video-wrapper设width: 100%+aspect-ratio: 16 / 9 -
<video>标签本身必须移除 HTML 属性width和height，并在 CSS 中设width: 100%+height: 100%+object-fit: cover - 务必加
overflow: hidden到 wrapper，否则object-fit: cover在某些缩放场景下会溢出
最常被忽略的一点：aspect-ratio 是 layout 阶段生效的属性，它影响的是盒模型尺寸，不是渲染层变形。所以别把它和 transform: scale() 混用，也别指望它能替代 object-fit 或 background-size 的内容对齐逻辑。
