因为同时设置width和height会强制拉伸，无视原始宽高比，导致不同比例商品图被压扁或拉长；应改用max-width: 100%; height: auto或object-fit配合明确容器尺寸来保持比例。
为什么商品图一加宽高就变形
因为同时写了 width 和 height 两个固定值（比如 width="300" height="300"），浏览器直接按数值拉伸，完全无视图片原始比例。尤其在商品列表这种多图混排场景里，不同商品图宽高比各异（1:1、4:3、16:9），硬塞进统一尺寸框必然有的被压扁、有的被拉长。
- 内联属性
width/height会覆盖 CSS，优先级高，删掉它们 - CSS 中写
width: 300px; height: 300px同样危险，除非你确认所有图都是正方形 - 用
max-width: 100%; height: auto替代——前者限宽不强制撑满，后者让高度随宽等比计算
Flex 商品卡片里图片不缩放怎么修
常见现象：给 .product-card 设了 display: flex，里面 <img alt="HTML商品列表图片变形怎么办？保持宽高比布局技巧" > 写了 max-width: 100%; height: auto，但图片还是原尺寸卡死不动。这不是 CSS 写错了，是 Flex 子项默认带 min-width: auto，锁死了图片最小宽度，max-width 失效。
- 修复方式不是改
<img alt="HTML商品列表图片变形怎么办？保持宽高比布局技巧" >，而是改它的直接父容器（比如.product-card__image） - 给该父容器加
min-width: 0，解除锁定 - 再补一句
max-width: 100%更稳妥（写在父容器上） - 图片自身保留
max-width: 100%; height: auto即可
固定尺寸卡片里怎么让图完整显示
商品卡片常设固定高宽（如 width: 200px; height: 250px），这时 max-width + height: auto 不起作用——因为图片没被约束进这个盒子。必须用 object-fit 配合明确尺寸声明。
- 先确保
<img alt="HTML商品列表图片变形怎么办？保持宽高比布局技巧" >有明确宽高，比如width: 100%; height: 100%（父容器需设position: relative或display: block） - 再加
object-fit: contain：等比缩放，完整显示，留白由父容器背景色填充 - 若要填满不留白，改用
object-fit: cover，但得配object-position: center防关键内容（如商品主图人脸/LOGO）被裁掉 - 别用
object-fit: fill——这就是变形开关
响应式轮播图或瀑布流怎么保比例
当商品图不靠自身尺寸撑开容器（比如轮播图每张图都要占满 100% 宽度，但高度要恒定为 16:9），光调 <img alt="HTML商品列表图片变形怎么办？保持宽高比布局技巧" > 样式不够，得从容器入手。现代方案用 aspect-ratio，老浏览器 fallback 用 padding-top 百分比技巧。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.product-banner { width: 100%; aspect-ratio: 16 / 9; }+img { width: 100%; height: 100%; object-fit: cover; } - Safari ≤15.2 不支持
aspect-ratio，fallback 方案：父容器设position: relative; padding-top: 56.25%（16:9 对应值），<img alt="HTML商品列表图片变形怎么办？保持宽高比布局技巧" >设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 所有方案都依赖图片有真实 intrinsic 尺寸——如果 CMS 输出的图宽高元数据缺失或混乱，前端再怎么调也救不了比例，得回源头校验
