直接给加aspect-ratio无效，因是替换元素，浏览器优先尊重其固有宽高比并忽略该声明；必须作用于外层块级容器，配合width/max-width、object-fit及height:100%才生效，且需为Safari 15.3及更早版本提供padding-bottom降级方案。
为什么直接给 <img> 加 aspect-ratio 没反应
浏览器会优先尊重 <img> 的固有宽高比（intrinsic aspect ratio），直接忽略你写的 aspect-ratio 声明。这不是 bug，是规范行为——<img> 是替换元素，天生带尺寸语义。
- 实测中常见现象：样式写了但容器高度为 0，或图片拉伸变形、裁剪异常
- 哪怕只是调试，也别在
<img>上写aspect-ratio: 4 / 3，纯属浪费时间 - 真正生效的位置是外层块级容器，比如
<div class="img-container"><img src="..."></div>
aspect-ratio 容器必须配 width 或 max-width 才能稳住高度
aspect-ratio 不是独立属性，它需要一个明确的宽度基准来推算高度。只写 aspect-ratio: 16 / 9，容器可能塌缩为 0，也可能撑满整个父容器，完全不可控。
- 推荐写法：
width: 100%; max-width: 400px; aspect-ratio: 4 / 3;—— 宽度自适应且有上限，高度由比例自动计算 - 慎用
height: 200px：显式height会静默覆盖aspect-ratio的高度计算逻辑 - 在
display: flex容器里，子项默认align-items: stretch，会强行拉高容器破坏比例；加align-self: center可修复 -
position: absolute元素上用aspect-ratio无效——它对脱离文档流的元素不生效
object-fit 和 aspect-ratio 必须配合使用
aspect-ratio 只管“框”，object-fit 才管“图”。两者分工不同，缺一不可：
-
aspect-ratio: 4 / 3只保证容器是 4:3 的空盒子，不控制里面图片怎么铺 -
object-fit: cover让图片等比缩放后居中裁剪填满整个框（最常用） -
object-fit: contain让图片完整显示，四周可能留白；需配合background-color防止难看空白 -
object-fit仅对替换元素（<img>、<video></video>）有效，对background-image完全无效
Safari 15.3 及更早版本要降级 fallback
Safari 15.0–15.3 会静默忽略 aspect-ratio，不报错也不渲染。不能只靠 @supports (aspect-ratio: 1/1) 做降级——老浏览器不识别该规则，会跳过整个样式块。
- 推荐 fallback 方案：
padding-bottom百分比技巧 - 例如 4:3 图片 →
padding-bottom: 75%（公式：height / width × 100%） - 容器设
position: relative，<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 服务端若可输出原始宽高，保留 HTML 的
width和height属性仍有价值：SSR 首屏更稳，也能辅助旧浏览器推导比例
实际项目里最容易被忽略的，是容器宽度约束缺失 + Safari 15.3 兼容性验证漏掉真机测试。这两个点一旦出问题，首屏图片就会跳动或彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
