aspect-ratio写了没效果不是属性失效，而是浏览器根本没让它参与计算；最常见干扰是显式声明height/min-height（含height: auto）、父容器宽度为auto、flex父容器align-items: stretch拉伸、错写在grid容器而非grid-item上，以及直接写在替换元素如上。
aspect-ratio 为什么写了没效果
不是属性失效，而是浏览器根本没让它参与计算。最常踩的坑是：height 或 min-height 被显式声明——哪怕只写了 height: auto 或 min-height: 0，都会直接屏蔽 aspect-ratio 的逻辑。浏览器只认一个高度来源，height 优先级永远高于 aspect-ratio。
其他干扰源包括：
- 父容器宽度为
auto（比如没用col-6、没设width、也没在grid或flex中分配空间），aspect-ratio就失去“1份宽”这个基准 -
display: flex父容器默认align-items: stretch，会强制拉伸子项高度，覆盖比例 - 把
aspect-ratio错写在grid容器上，而不是每个grid-item上
Bootstrap 里怎么让 aspect-ratio 正常工作
Bootstrap 的 col 类本身不提供宽度锚点，col（无数字后缀）默认 flex-basis: 0，容易导致宽度坍缩。必须用带尺寸的类，比如 col-6、w-50 或 max-width: 400px，给 aspect-ratio 提供明确宽度来源。
推荐最小可行结构：
<div class="container">
<div class="row">
<div class="col-6">
<div style="aspect-ratio: 1 / 1; background: #eee;"></div>
</div>
</div>
</div>
注意：
- 别用
col单独包裹——它不保证宽度；col-*更稳 - 若需固定尺寸（如 200px 正方），直接加
style="width: 200px; aspect-ratio: 1 / 1;"，比用w-25类更可控 -
row默认是display: flex，记得确认没额外加align-items: stretch
video 或 canvas 这类替换元素怎么用 aspect-ratio
<video></video> 和 <canvas></canvas> 是替换元素，aspect-ratio 直接写在它们身上会被忽略。必须用一层 <div> 包裹，并把 <code>aspect-ratio 写在 wrapper 上。
关键操作：
- 移除
<video></video>标签里的width和height属性（如width="640"） - wrapper 设
display: block或display: grid；避免放在display: flex父容器中（Safari 15.4–16.3 有 bug） - 子元素（如
<video></video>）设width: 100%; height: 100%; object-fit: cover; - 加
max-width控制上限，例如max-width: 800px，否则大屏下会无限拉宽
错误写法：video { aspect-ratio: 16 / 9; } → 高度塌陷为 0。
兼容 Safari 15.3 及更旧版本的兜底方案
aspect-ratio 在 Safari 15.3 及更早版本中静默失效，容器高度直接坍缩为 0，控制台不报错，极难定位。不能只靠 @supports (aspect-ratio: 1 / 1)，微信 X5 内核等环境根本不识别该规则。
必须手动双写：
- 现代写法放前面：
aspect-ratio: 1 / 1;（空格不能省，不能写成16:9或加单位） - 后备写法紧随其后：
padding-bottom: 100%;（对应 1:1），且外层容器必须有position: relative - 子内容用
position: absolute; top: 0; left: 0; width: 100%; height: 100%塞满 - 若父容器是 flex 子项，加
min-width: 0防止 flex shrink 导致宽度基准丢失
真正容易被忽略的是嵌套层级里的隐性约束：Vue 的 <slot></slot>、CMS 输出的卡片 wrapper、甚至某个 CSS-in-JS 库注入的不可见 height: 100%，都可能让 aspect-ratio 在你完全没察觉的情况下失效。查问题时得一层层往上 inspect computed styles，而不是只盯着目标元素本身。
