应给图片外层容器设置aspect-ratio，再配合Object-fit控制显示；直接设在img上无效，因img是替换元素，该属性无法触发布局约束。
用 aspect-ratio 属性保持图片比例，核心是让容器（而非 object-fit 控制内容显示方式。直接给 aspect-ratio 无效，因为图片是替换元素，该属性在 img 上不触发布局约束。
给图片外层容器设置 aspect-ratio
这是最可靠的做法：用一个
或
![如何用 aspect-ratio 属性保持图片在响应式中的比例]()
aspect-ratio，再让图片填满容器。 - 容器设
aspect-ratio: 16 / 9（或任意比值，如4 / 3、1 / 1） - 容器设
width: 100%（响应式宽度） - 图片设
width: 100%; height: 100%; object-fit: cover（或contain，按需选择）
避免直接在 img 上用 aspect-ratio
aspect-ratio 在它上面不会强制约束渲染尺寸，仅影响其内在尺寸计算（比如作为 flex 或 grid 子项时的基准），但无法保证视觉比例稳定。实测中常出现拉伸、裁剪异常或完全无效果。
配合 max-width 和 object-fit 精确控制
仅靠 aspect-ratio 不足以应对所有场景，需组合使用：
- 容器加
max-width: 100%防止溢出父级 - 图片用
object-fit: cover保持比例并填满（可能裁剪）；用contain完整显示但留白 - 若需响应式切换比例（如移动端改 4:3），可用媒体查询重设容器的
aspect-ratio
兼容性注意（2024 年主流已支持）
aspect-ratio 在 chrome 88+、firefox 89+、safari 15.4+、edge 88+ 均原生支持。如需兼容 Safari 15.3 及更早版本，可回退用 padding-top 百分比技巧（即“垂直 padding hack”），但现代项目通常无需降级。