直接给或加aspect-ratio无效，因其为替换元素，不参与CSS盒模型尺寸计算；必须作用于外层块级容器，配合width/max-width和object-fit才能生效，且需为Safari 15.3及更早版本提供padding-bottom降级方案。
为什么直接给 ![]()
aspect-ratio 没效果
因为它们是替换元素，浏览器不将其纳入 CSS 盒模型的尺寸计算流程。aspect-ratio 只对参与盒模型计算的块级/行内块元素生效。写在
正确做法是用一个容器包裹媒体元素，再对该容器设置 aspect-ratio：
- 容器必须有明确的宽度来源（如
width: 100%、max-width: 600px或 flex/grid 约束） - 容器需触发标准盒模型（默认
display: block即可，无需额外声明） - 媒体子元素设
width: 100%; height: 100%，再配合object-fit控制填充方式
aspect-ratio 和 width/height 冲突时谁赢
它不是覆盖规则，而是参与盒模型尺寸推导的“辅助逻辑”。一旦你同时写了具体值的 width 和 height（比如 width: 300px; height: 200px;），浏览器直接按固定尺寸渲染，aspect-ratio 彻底失效。
有效组合只出现在至少一个方向为可推导状态时：
-
width: 100%; aspect-ratio: 16 / 9→ 高度自动算出 -
height: 200px; aspect-ratio: 4 / 3→ 宽度自动算出（266.67px） -
width: 100%; height: 100%→aspect-ratio被跳过（父高不确定时更危险）
如何防止异步加载导致布局跳动（CLS）
关键不是等图片加载完，而是让浏览器在首屏渲染时就画好“格子”。aspect-ratio 的作用就是提前锁定容器尺寸，避免内容撑开后重排。
但前提是容器本身不能依赖子内容撑开：
- 父容器不能是
height: auto且无其他约束（如min-height、flexalign-items限制） - 若卡片内嵌图片，应给卡片容器设
aspect-ratio，而不是只给 - 搭配
object-fit: cover或contain控制内部媒体显示，否则可能拉伸或留白，反而放大视觉跳动
兼容旧浏览器的 fallback 怎么写才不翻车
旧版 Safari（≤15.3）、IE 完全不识别 aspect-ratio，会直接忽略。主流降级方案仍是 padding-top 百分比技巧，但它和现代写法有本质差异：
- 必须用
position: relative+padding-top: 56.25%（16:9）+ 绝对定位子元素 - 容器
height必须为auto，否则 padding 百分比无效 - 在 flex 容器里要注意
align-items: stretch可能干扰高度计算 - 别混用：现代写法用
aspect-ratio，降级用@supports not (aspect-ratio: 1/1)包裹 fallback
真正容易被忽略的是：即使你写了 aspect-ratio，如果父容器没给宽度约束，或者用了 min-width 强行锁死尺寸，比例仍会失真——它不是魔法，只是盒模型里一个参与计算的变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
