aspect-ratio单独使用不能防止图片拉伸，因为它只约束容器宽高比，不控制图片渲染；必须配合object-fit（如cover）并设置img为display:block才能真正避免变形。
aspect-ratio 单独用根本不管图片拉伸
加了 aspect-ratio: 16 / 9 但图片还是被压扁？这不是 bug，是预期行为。aspect-ratio 只约束**容器本身**的宽高比，不干预里面 img 的渲染逻辑。浏览器默认对 img 使用 object-fit: fill —— 就是强行拉伸填满，完全无视原始比例。
- 只写
aspect-ratio，不设object-fit，等于只画了个框，没管里面怎么装 - 哪怕容器宽高比正确，
img仍按自身 intrinsic size 渲染，再被 fill 拉伸一次 - 常见误操作：
.card { aspect-ratio: 4 / 3; } .card img { width: 100%; }→ 缺少object-fit，必变形
必须显式设置 object-fit: cover 才生效
object-fit: cover 不是“可选项”，是 aspect-ratio 起作用的前提条件。它告诉浏览器：在你刚画好的那个框里，等比缩放图片并裁剪边缘，而不是拉伸。
-
cover必须配合明确尺寸才触发：推荐width: 100%; height: 100%（父容器已由aspect-ratio确定高度） - 别漏掉
display: block：防止img行内默认间隙导致高度塌陷 - 示例安全写法：
.img-container { aspect-ratio: 4 / 3; width: 100%; }<br>.img-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
常见踩坑点：cover 失效的 3 种真实原因
写了 object-fit: cover 还是拉伸？大概率掉进下面某个坑里。
-
父容器没显式宽度：比如只写
aspect-ratio: 1 / 1，但没设width，容器宽度为 0，高度算出来也是 0 →cover无处施展 -
img 上写了 height: 200px 或 max-height：硬编码高度会覆盖
aspect-ratio计算出的高度，直接回归 fill 行为 -
Flex/Grid 容器中 align-items: stretch：Grid 默认拉伸子项高度，
img先被拉高再cover，结果是“先拉伸、再裁”，视觉上仍是变形
Safari 15.2 及更早版本不认 aspect-ratio
不是你的 CSS 写错了，是 Safari 引擎根本不解析 aspect-ratio。它会忽略该属性，容器退化为无高度，object-fit: cover 随之失效，最终 fallback 到 fill 拉伸。
立即学习“前端免费学习笔记（深入）”；
- 兜底方案只能用
padding-bottom技巧：padding-bottom: 75%（对应 4:3） +position: relative/absolute - 别指望
-webkit-aspect-ratio：该前缀不存在，Safari 15.2 之前就是不支持 - 如果项目需兼容 iOS 15.1 及更早，
aspect-ratio就不能作为主方案，得切到 background-image 回退路径
aspect-ratio 当成“万能比例锁”，却忘了它只是个容器属性，真正控制图片怎么显示的，永远是 object-fit 和它的上下文约束。 
