最稳起点是max-width: 100% + height: auto；填满固定容器需aspect-ratio、object-fit、width/height三者缺一不可，因height: auto依赖width已设定，且iOS Safari≤13.3不支持object-fit作用于img。
直接结论：用 max-width: 100% + height: auto 是最稳的起点；但若需填满固定容器（如卡片、轮播图），必须配合 aspect-ratio 和 object-fit，且三者缺一不可。
为什么只写 height: auto 没用？
它不是独立生效的魔法开关，而是依赖 width 已被明确设定。如果父容器宽度为 0（比如 flex 未设 flex-shrink: 0 或没设 min-width），或者图片本身没写 width，height: auto 就算不出来高度。
- 检查 DevTools 的 Computed Styles，确认
width最终值不是auto - 避免在 img 上同时写
max-width: 100%和width: 100%—— Safari 旧版可能因此重算异常 - 别信 HTML 的
width/height属性，现代浏览器只用它做初始渲染占位，CSS 会覆盖
object-fit: cover 在移动端为什么经常失效？
因为它是“在已有盒子里怎么摆图”，不是“自动造盒子”。iOS Safari ≤13.3 完全不支持 object-fit 作用于 <img>，加 -webkit-object-fit 也无效，直接退化为拉伸（fill）。
- 必须给容器设可推导的高度：优先用
aspect-ratio: 16 / 9，fallback 用padding-bottom: 56.25%+position: relative -
<img>要加width: 100%+height: 100%（或height: auto配合容器锁高），并设display: block - 用
cover时，父容器务必加overflow: hidden，否则裁剪部分会溢出破坏布局
如何让商品网格里的图不畸变又高度齐平？
靠单个 img 样式不够，得从容器层控制比例和对齐逻辑。
立即学习“前端免费学习笔记（深入）”；
- 给图片外层容器（如
<div class="product-img">）设aspect-ratio: 4 / 3，而不是直接设在<img>上 -
<img>加width: 100%+height: 100%+object-fit: cover+object-position: center - Grid 列数用
repeat(auto-fit, minmax(320px, 1fr)))，避免写死列数；Android 4.4–6.0 WebView 不支持auto-fit，要 fallback 成repeat(2, 1fr) - 多行文字撑高卡片时，补上
grid-auto-rows: 1fr，否则相邻行不对齐
真机测试最容易忽略的一点
横屏切换、软键盘弹出、动态加载内容后，容器宽高比可能突变——一张 400×300 的图在 cover 下可能缩成图标大小，而你根本没意识到容器高度已被重置。不要只看竖屏效果，更别只信 Can I Use 的“支持”标记；iOS Safari 15.4+ 才真正支持 aspect-ratio，旧版必须降级到 padding-top hack。
