aspect-ratio必须作用于video的父容器而非video本身，因video是替换元素，其固有宽高比覆盖CSS设置；正确写法为aspect-ratio: 16 / 9，需搭配width: 100%、max-width和object-fit，并移除video内联宽高属性。
aspect-ratio 很方便，是因为它用一行声明就替代了过去必须靠 position + padding-top + 绝对定位的三步 hack。但它不是“写了就一定生效”，很多失效场景其实和你写的其他 CSS 冲突了。
video 或 iframe 上直接写 aspect-ratio 没反应
这不是 bug，是规范限制：video、iframe 属于替换元素（replaced element），浏览器会忽略对其直接设置的 aspect-ratio。常见表现是容器高度塌陷为 0，或内容被横向拉成一条线。
- 必须用一层
<div class="wrapper">包裹<video>，把aspect-ratio: 16 / 9写在 wrapper 上 - 移除
<video>标签上的内联width或height属性（如width="640"），否则会覆盖 CSS 控制 - 确保 wrapper 是块级容器：推荐
display: block或display: grid；避免放在display: flex的父容器中——Safari 15.4–16.3 会直接忽略其aspect-ratio
aspect-ratio: 1 / 1 写了却不是正方形
大概率不是属性没起作用，而是它被别的样式悄悄屏蔽了。最常踩的三个坑：
-
height或min-height被显式声明（哪怕只是height: auto或min-height: 0），都会直接禁用aspect-ratio的计算逻辑 - 父容器是
display: flex且未重置align-items，默认的stretch会强制子项填满可用高度，覆盖比例 - 父容器宽度为
auto（比如没设width、没在 Grid/Flex 中分配空间），aspect-ratio就失去了“1份宽”这个基准，无法推导高度
如何让 aspect-ratio 容器既响应式又不撑爆屏幕
只写 aspect-ratio: 16 / 9 是不够的——它只管比例，不管尺寸上限。大屏下可能无限拉宽，破坏版式。
立即学习“前端免费学习笔记（深入）”；
- 必须加
max-width限制宽度上限，并配width: 100%保证小屏收缩：.wrapper { aspect-ratio: 16 / 9; width: 100%; max-width: 800px; } -
max-width值建议按内容密度定：文章内嵌常用720px～800px；全屏横幅可用100vw配合margin: 0 auto - 绝对不要给 wrapper 设
height，否则会与aspect-ratio冲突，导致高度计算异常 -
object-fit只在父容器有明确宽高时才起作用；如果 wrapper 高度靠aspect-ratio自动算出，object-fit就能正常裁剪
真正容易被忽略的是嵌套层级里的隐性约束：比如 Vue 的 <slot> 外层组件、CMS 输出的卡片 wrapper、甚至某个 CSS-in-JS 库注入的不可见 height: 100%，都可能让 aspect-ratio 在你完全没察觉的情况下失效。查问题时，得一层层往上 inspect computed styles，而不是只盯着自己写的那行。
