如何用CSS让移动端图片自适应且不被拉伸变形？

最稳起点是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 就算不出来高度。

1. 检查 DevTools 的 Computed Styles，确认 width 最终值不是 auto
2. 避免在 img 上同时写 max-width: 100% 和 width: 100% —— Safari 旧版可能因此重算异常
3. 别信 HTML 的 width/height 属性，现代浏览器只用它做初始渲染占位，CSS 会覆盖

object-fit: cover 在移动端为什么经常失效？

因为它是“在已有盒子里怎么摆图”，不是“自动造盒子”。iOS Safari ≤13.3 完全不支持 object-fit 作用于 <img>，加 -webkit-object-fit 也无效，直接退化为拉伸（fill）。

1. 必须给容器设可推导的高度：优先用 aspect-ratio: 16 / 9，fallback 用 padding-bottom: 56.25% + position: relative
2. <img> 要加 width: 100% + height: 100%（或 height: auto 配合容器锁高），并设 display: block
3. 用 cover 时，父容器务必加 overflow: hidden，否则裁剪部分会溢出破坏布局

如何让商品网格里的图不畸变又高度齐平？

靠单个 img 样式不够，得从容器层控制比例和对齐逻辑。

1. 给图片外层容器（如 <div class="product-img">）设 aspect-ratio: 4 / 3，而不是直接设在 <img> 上
2. <img> 加 width: 100% + height: 100% + object-fit: cover + object-position: center
3. Grid 列数用 repeat(auto-fit, minmax(320px, 1fr)))，避免写死列数；Android 4.4–6.0 WebView 不支持 auto-fit，要 fallback 成 repeat(2, 1fr)
4. 多行文字撑高卡片时，补上 grid-auto-rows: 1fr，否则相邻行不对齐

真机测试最容易忽略的一点

横屏切换、软键盘弹出、动态加载内容后，容器宽高比可能突变——一张 400×300 的图在 cover 下可能缩成图标大小，而你根本没意识到容器高度已被重置。不要只看竖屏效果，更别只信 Can I Use 的“支持”标记；iOS Safari 15.4+ 才真正支持 aspect-ratio，旧版必须降级到 padding-top hack。