aspect-ratio 在现代浏览器（chrome 88+、firefox 89+、safari 15.4+）可直接使用，但 ie 和旧版 safari 不支持；需避免对 img 同时设 aspect-ratio 和 width: 100%，并显式声明 Object-fit；grid 中仅作用于 item 本身，flex 中需确保至少一轴有确定值，否则不生效；相比 padding-top 黑科技，aspect-ratio 更语义化、可动画、支持 calc()，但需统一方案、注意 ssr 兼容性及低版本降级策略。
aspect-ratio 在现代浏览器中能不能直接用
能，但得看目标用户环境。Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio；IE 和旧版 Safari（
常见错误现象：aspect-ratio: 16 / 9 写了但元素没按比例缩放，大概率是浏览器不支持，或父容器设置了 height 且值固定，强行覆盖了纵横比约束。
- 使用场景：卡片封面图、视频容器、响应式网格项（替代 padding-top 技巧）
- 不兼容时 fallback 方案必须手动提供，css 本身不支持“if support”写法
- Safari 15.0–15.3 有已知 bug：配合
object-fit: cover时可能拉伸失真
怎么给 img 或 video 元素安全加 aspect-ratio
直接在 <img> 或 <video> 上写 aspect-ratio 是危险的——它们自带固有尺寸，CSS 纵横比会和 intrinsic size 冲突，尤其在未设 width 或 height 时行为不一致。
正确做法是包一层容器，把 aspect-ratio 放在容器上，再让子元素填满：
立即学习“前端免费学习笔记（深入）”；
div.media-container { aspect-ratio: 16 / 9; width: 100%; } div.media-container > img, div.media-container > video { width: 100%; height: 100%; object-fit: cover; }- 绝对不要对
<img>自身设aspect-ratio+width: 100%，Safari 可能渲染空白 -
object-fit必须显式声明，否则默认拉伸变形 - 如果图片需懒加载（
loading="lazy"），容器仍要先占位，否则页面会跳动
aspect-ratio 配合 grid 或 flex 布局出问题怎么办
在 display: grid 里，aspect-ratio 对 track（行/列）无效，只作用于 grid item 本身；在 display: flex 中，若父容器设了 flex-direction: column 且没给高度，aspect-ratio 可能无法触发，因为缺乏计算基准。
关键点：纵横比生效的前提是至少一个轴（宽或高）有确定值，否则浏览器无法推导另一轴。
- Grid 场景下，确保 item 的
width可计算（比如grid-column: span 2+ 明确列宽） - Flex 场景下，避免对 flex item 同时设
flex: 1和aspect-ratio，容易因收缩逻辑冲突导致高度塌陷 - 用
min-height: 0或overflow: hidden有时能强制 flex item 尊重aspect-ratio，但属 hack，慎用
用 aspect-ratio 替代 padding-top 黑科技是否值得
值得，但仅限支持环境明确的项目。老式 padding-top 技巧（用 padding-top: 56.25% 模拟 16:9）靠的是 vertical padding 相对于 width 计算的特性，它兼容性极好，但语义差、维护难、无法响应式微调。
aspect-ratio 是声明式、可继承、可动画（部分浏览器）、支持 calc() 的真实解法。
- 别在同一个项目里混用两种方案，容易因优先级或层叠顺序引发不可控表现
- 如果要用 calc() 动态算比例，如
aspect-ratio: calc(100vw / 3) / 200px，注意单位必须一致（都用无单位数值，如16 / 9），不能混 px/% - 服务端渲染（SSR）或静态生成站点要注意：某些 CSS-in-JS 库（如 styled-components v5）可能过滤未知属性，需确认是否透出
aspect-ratio
真正麻烦的从来不是怎么写这行 CSS，而是当设计要求「在 iOS 14.5 上也保持比例」时，你得决定是降级、polyfill 还是改需求。