能，但只控制容器尺寸比例，不缩放内部内容；现代浏览器基本可用，safari 15.0–15.3 会静默失效，必须降级。
能，但只控制容器尺寸比例，不缩放内部内容；现代浏览器基本可用，Safari 15.0–15.3 会静默失效，必须降级。
为什么写了 aspect-ratio 容器却没高度
这是上线后最常遇到的“黑盒”问题——尤其在 Safari 15.0–15.3 或微信 X5 内核中，不报错、不警告，只是高度变成 0 或按默认行为渲染。
- 检查是否漏了
width或max-width；没有宽度约束，aspect-ratio无法推导高度 - 确认父容器没有
display: flex+align-items: stretch，这会让子项强行撑高，覆盖比例计算；加align-self: center可修复 - 真机测试 Safari 15.0–15.3，
Can I Use的绿色标记在这里不可信 -
@supports (aspect-ratio: 1/1)在不支持的浏览器中会被整块跳过，无法触发降级逻辑，所以不能只靠它
怎样写才真正生效：参数、display 和冲突点
aspect-ratio: 16 / 9 空格不能省，也不能加单位或引号；它只对块级元素或替换元素（如 img、video）起作用，display: inline 元素无效。
- 必须配合显式宽度：
width: 100%（最常用）、max-width: 100%（防图文撑破）、width: 300px（固定宽场景） -
height不能同时设为非auto值（比如height: 200px），否则aspect-ratio被完全忽略 - Flex/Grid 容器的直接子项若未显式设
display: block或inline-block，aspect-ratio很可能被 display 类型屏蔽 - 伪元素（如
::before）里设aspect-ratio无效，它不生成独立盒模型
兼容老浏览器的 fallback：用 padding-bottom 百分比占位
这个 hack 在所有浏览器都可靠，但要注意：它让子元素脱离文档流，不能和 flex 或 grid 的自动尺寸逻辑混用。
- 父容器设
position: relative、width: 100%、height: 0、padding-bottom: 56.25%（16:9 → 9 ÷ 16 × 100%） - 子元素（如
img）设position: absolute、inset: 0、width: 100%、height: 100% - 若需叠加文字或按钮，内容层需再包一层
position: absolute、inset: 0，否则会脱离流 - 别忘了配
object-fit: cover或contain控制图片铺法，aspect-ratio只管框，不管图怎么塞
Grid 中实现等比矩阵：别漏 minmax(0, 1fr)
aspect-ratio 在 Grid 单元中不生效？先确认网格项是否生成块级盒——display: contents、inline 或未显式声明 display 都会导致失败。
- 确保网格项是
block级：可加blockclass 或显式写display: block - 单纯
grid-template-columns: repeat(3, 1fr)+aspect-ratio: 1 / 1不够，整行高度仍由内容撑开；必须用minmax(0, 1fr) - Safari 15.4+ 才开始支持 grid item 上的
aspect-ratio，旧版需 fallback - 即使格子自身保持 1:1，里面的
<img>若没配object-fit或clamp()，视觉上仍会拉伸或溢出
真正容易被忽略的是两点：一是 Safari 15.0–15.3 的静默失效往往要等用户反馈才暴露，本地开发测不出来；二是服务端传来的原始宽高（HTML width/height 属性）不是过时配置，而是 SSR 首屏稳定性和 JS fallback 的关键锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
