直接给加aspect-ratio无效，因其是替换元素，默认inline且浏览器优先尊重其固有宽高比或HTML的width/height属性；必须作用于块级容器（block/flex/grid），配width:100%和object-fit才能生效。
直接给 <img alt="如何在CSS中使用aspect-ratio属性保持响应式图片固定比例" > 加 aspect-ratio 基本无效，必须作用于块级容器，并配合 width: 100% 和 object-fit 才能真正生效。
为什么 aspect-ratio 写在 <img alt="如何在CSS中使用aspect-ratio属性保持响应式图片固定比例" > 上没反应？
因为 <img alt="如何在CSS中使用aspect-ratio属性保持响应式图片固定比例" > 是替换元素，默认 display: inline，且浏览器会优先尊重其固有宽高比（intrinsic aspect ratio）或 HTML 的 width/height 属性。一旦这两个属性存在（比如 CMS 输出的图带内联尺寸），aspect-ratio 就被静默忽略——DevTools 里甚至不显示为有效声明。
- Chrome/Safari 会把
img { aspect-ratio: 16 / 9; }标为 invalid - 即使移除了内联宽高，
display: inline也导致它不参与盒模型比例计算 - Flex/Grid 容器中若设了
align-items: stretch（默认行为），会强行撑高子项，覆盖比例推导
正确写法：容器上设 aspect-ratio，图片填满并裁剪
核心是让容器承担“比例占位”职责，图片只负责内容填充。最小可靠组合如下：
.img-wrap {
width: 100%;
aspect-ratio: 16 / 9;
}
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
- 容器必须是
block、flex或grid，不能是inline或inline-block - 容器不能设
height（包括height: auto），否则比例计算被跳过 - 容器不能脱离文档流（如
position: absolute或float） -
img必须加display: block消除行内换行符间隙
移动端兼容性与降级必须做
iOS Safari 15.4+、Chrome Android 100+ 支持 aspect-ratio；但微信安卓版仍大量使用 X5 内核（完全不支持），iOS 15.2 及更早版本也会渲染为高度 0。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@supports (aspect-ratio: 1/1)包裹主逻辑 - 降级方案推荐
padding-bottom百分比（如 16:9 →padding-bottom: 56.25%），配合position: relative+absolute定位图片 - 别只测最新 Chrome，真机连 iOS 15.2 都得跑一遍
object-fit 和 aspect-ratio 缺一不可
aspect-ratio 只管容器“框”的比例，不管里面图片怎么铺；object-fit 才决定图片如何适应这个框。漏掉任一，都会出问题：
- 只设
aspect-ratio不设object-fit→ 图片拉伸变形或上下/左右留白严重 -
object-fit: cover：裁剪填满，适合封面图，但人脸等关键区域可能被切掉 -
object-fit: contain：完整显示，必留白，适合证件照、产品图等需保全全部内容的场景
最易被忽略的是：当容器用了 flex 或 grid，且子项未显式设 align-self: center，stretch 行为会直接破坏比例——这点在卡片网格中尤其常见。
