<img>上设置aspect-ratio无效，因其为替换元素，优先使用固有宽高比；必须用块级容器设aspect-ratio+width+object-fit，并避免height声明。
直接给 <img> 加 aspect-ratio 不会控制高度——它根本不起作用。 浏览器把 <img> 当作替换元素，优先用它的固有宽高比（intrinsic aspect ratio），CSS 的 aspect-ratio 会被静默忽略。真正能控制响应式图片高度的，是外层容器。
为什么 <img> 上写 aspect-ratio 没反应
这不是 bug，是规范行为：<img> 和 <video> 这类替换元素不参与常规盒模型的高度计算。你写 aspect-ratio: 16 / 9，浏览器照常按默认尺寸（如 300×150）或资源元数据渲染，结果常是：容器高度为 0、图片拉伸变形、加载后突然下跳（CLS）。真机测试中，Safari 15.3 及更早版本甚至完全静默失效，不报错也不渲染。
正确写法：容器设 aspect-ratio + width + object-fit
必须用块级容器包裹图片，并满足三个硬性条件：
-
display是block、flex或grid子项（不能是inline） - 显式声明
width或max-width（例如width: 100%或max-width: 480px） - 不能设任何
height（包括height: auto、height: 100%）
同时，<img> 必须配 width: 100%; height: 100% 和 object-fit 才能正确填充：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover→ 等比缩放+居中裁剪（最常用） -
object-fit: contain→ 完整显示，四周可能留白（建议加background-color）
示例：
.img-container {
width: 100%;
max-width: 400px;
aspect-ratio: 4 / 3;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
Flex/Grid 布局里容易踩的坑
弹性或网格子项默认带隐式最小尺寸限制（min-width: auto、min-height: auto），会压制 aspect-ratio 的高度推导，尤其在小屏或横竖屏切换时容器高度归零。
- Flex 子项加
flex-shrink: 0防止被压缩 - Grid 子项加
min-width: 0; min-height: 0 - Grid 容器若嵌套在 Flex 里，也要加
min-width: 0和min-height: 0 - 响应式列数变化时，用
minmax(0, 1fr)替代1fr，确保轨道能真正收缩
另外，align-items: stretch（Flex 默认值）会让子容器被强行拉高，破坏比例；此时加 align-self: center 可修复。
兼容性与降级必须手写，不能只靠 @supports
aspect-ratio 在 iOS Safari 15.4+、Chrome Android 100+ 才原生支持。低于这些版本（比如 iOS 15.2 真机或旧 WebView）会静默忽略该规则，容器塌陷，CLS 更严重。
-
@supports (aspect-ratio: 1 / 1)检测本身在 Safari 15.0–15.3 会返回true，但实际不生效——不能只靠它做降级 - 必须手动写
@supports not (aspect-ratio: 1 / 1)块，配合padding-bottom百分比方案 - 16:9 →
padding-bottom: 56.25%；4:3 →padding-bottom: 75%；容器需position: relative; height: 0，图片设position: absolute; top: 0; left: 0; width: 100%; height: 100%
真正的难点不在语法，而在三点同时满足：容器类型、宽度基准、无 height 干扰。少一个，aspect-ratio 就等于没写。
