商品图在卡片里忽胖忽瘦，换一张不同比例的图整个布局都变形。第一次遇到会往复杂处想，其实漏掉的多是个小前提。
.card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
图片只设了一边尺寸，另一边按原图比例撑开，父容器又被拉伸。这一点先确认清楚，后面就不用反复试。
「图片宽高比失真」这类改动最怕改一半，回滚脚本先准备好，再动生产。临时改动用注释写上日期和原因，过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳，出问题立刻换回去，比现场分析快得多。一次只改一处，改完立刻验证，几个改动叠在一起，出问题就说不清是谁导致的。
先做最小复现，能稳定跑出来的问题，排查成本会低一个数量级。别只看报错的最后一行，往上看几行，真正的起因通常在上面。
具体做法是，给图片容器固定比例；图片铺满并裁切；设置占位底色避免加载时抖动。
改完照着核一遍，不同比例的图片在卡片中显示一致，无拉伸变形。