应给图片外层容器设置aspect-ratio，再配合object-fit控制显示；直接设在img上无效，因img是替换元素，该属性无法触发布局约束。
用 aspect-ratio 属性保持图片比例，核心是让容器（而非 object-fit 控制内容显示方式。直接给 aspect-ratio 无效，因为图片是替换元素，该属性在 img 上不触发布局约束。
给图片外层容器设置 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 完整显示但留白aspect-ratio
兼容性注意（2024 年主流已支持）
aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+、Edge 88+ 均原生支持。如需兼容 Safari 15.3 及更早版本，可回退用 padding-top 百分比技巧（即“垂直 padding hack”），但现代项目通常无需降级。
