aspect-ratio 在 chrome 88+、firefox 89+、safari 15.4+ 原生支持；旧版 safari 仅支持无空格写法（如 16/9），需 fallback padding-top 或 js，配合 object-fit 实现图片不拉伸，且须防尺寸不可信导致塌陷。
aspect-ratio 在 Chrome/Firefox 中能直接用吗
能，但得看版本。Chrome 88+、Firefox 89+、Safari 15.4+ 支持原生 aspect-ratio；旧版 Safari（15.3 及更早）只支持 aspect-ratio: auto 或带单位的写法（如 aspect-ratio: 16/9），不支持 aspect-ratio: 16 / 9 中间带空格的语法。
常见错误现象：aspect-ratio: 16 / 9 在 Safari 15.3 下完全失效，控制台无报错，样式静默降级。
- 始终用
aspect-ratio: 16/9（无空格）——这是最稳妥的写法 - 若需兼容 Safari 15.2 及更早，必须 fallback 到 padding-top 技巧或 JS 计算
- 不要混用
width和height同时设固定值，否则aspect-ratio被忽略
图片宽高比不一致时，如何让容器自适应又不拉伸
aspect-ratio 本身不读取图片实际尺寸，它只约束容器盒模型的宽高关系。要让图片在容器内“不拉伸+居中+填满可见区”，得配合 object-fit。
使用场景：响应式图库、卡片封面、头像裁剪容器。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
width: 100%; height: 100%; object-fit: cover; - 容器设
aspect-ratio: 4/3;+overflow: hidden;，避免溢出 - 慎用
object-fit: contain：它保比例但留白，和“填满”目标冲突 - 如果图片是背景图，改用
background-size: cover+background-position: center
用 aspect-ratio 做响应式图片容器时，为什么 media query 失效
因为 aspect-ratio 是盒模型属性，它不触发媒体查询重计算——哪怕容器宽度变了，aspect-ratio 算出的高度仍是静态推导值，不会主动响应视口变化。
性能影响：纯 CSS 实现，无 JS 开销，但缺乏动态感知力。
- 需要不同宽高比时，别只靠
@media改aspect-ratio值（部分旧引擎不重绘） - 更可靠的做法：用
container-type: size+@container（Chrome 105+、Firefox 110+ 支持） - 简单项目仍可写多套类名，如
.card--4x3/.card--16x9，手动切换 - 注意：Safari 对
@container要求父容器显式设container-name，不能只靠container-type
服务器返回图片尺寸未知，怎么安全用 aspect-ratio
不能直接信后端传的宽高字段——可能为空、为 0、格式错，或 CDN 动态缩略图改变了原始比例。
容易踩的坑：JS 注入 style="--aspect-w: ${w}; --aspect-h: ${h}" 后，CSS 写 aspect-ratio: var(--aspect-w) / var(--aspect-h)，一旦变量非法，整条声明被丢弃，容器塌陷。
- 服务端尽量返回可靠的
width/height（如通过 ImageMagick 预检） - 前端兜底：用
aspect-ratio: 1 / 1作为默认值，再用 JS 检测图片加载后真实尺寸并 patch - 关键防御：CSS 中加
min-height: 100px;或height: min(30vh, 400px);，防白屏 - 避免在
img标签上直接写aspect-ratio——它不作用于替换元素自身，只对块级容器有效
真正难的不是写对 aspect-ratio: 16/9，而是当图片加载延迟、尺寸不可信、浏览器版本碎片化、还要兼顾可访问性时，哪一层该用 CSS 守住底线，哪一层必须交由 JS 补位。
