加了object-fit: cover商品图仍拉伸，是因为img或其父容器缺少明确宽高或aspect-ratio约束，导致浏览器无“框”可填；必须配合width+aspect-ratio、display: block及父容器overflow: hidden三要素才能生效。
为什么加了object-fit: cover商品图还在拉伸？
不是属性写错了，而是浏览器根本没“框”可填——img或其父容器缺少明确的宽高或比例约束。object-fit只决定“图怎么装进已知尺寸的盒子里”，盒子不存在，它就完全不工作。
-
img只写了width: 100%，但没设height、aspect-ratio，也没用padding-bottom模拟高度 → 图片按原始尺寸撑开容器 - 父容器是
display: flex或grid，子项未设min-height或height: 100%，加载中时高度塌陷为 0 - 用了
float但没清除，父容器高度为 0，img实际脱离文档流渲染 - Bootstrap 的
img-fluid含height: auto，和object-fit: cover冲突，必须显式覆盖
商品图最稳妥的三要素写法
现代电商页面推荐直接在img上定义尺寸基准，避免依赖父容器状态：
- 用
aspect-ratio锁比例（如aspect-ratio: 4 / 3），配合width: 100%→ 父容器不用设高，自身维持比例 -
img必须设display: block，消除行内默认基线间隙对高度的影响 - 加
overflow: hidden到父容器，否则cover裁剪部分可能溢出边框
示例：
img.product-image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}父容器只需overflow: hidden即可。
cover vs contain：商品图该选哪个？
这不是视觉偏好，而是语义需求判断：
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合主图卡片、列表图、轮播封面。但默认object-position: center center可能切掉产品主体，需配object-position: center top或top保全关键区域 -
object-fit: contain：等比缩放后完整显示，留白补足 → 适合详情页主图、证件照类商品、需要展示全貌的SKU图。此时object-position控制留白分布（如object-position: center居中，object-position: top留白在下） -
object-fit: fill：强制拉伸 → 一律避免，除非做故障艺术效果
Safari 13.3 及更早版本兼容性怎么兜底？
iOS Safari 13.3 及之前完全不支持object-fit在img上生效，加-webkit-object-fit也无效，会退化成fill行为（即拉伸）。
- 关键场景（如商品主图）建议服务端预裁剪，返回固定比例图片，彻底规避前端适配问题
- 次选方案：用
background-image+background-size: cover替代，但失去img的语义化、SEO 和懒加载能力 - polyfill（如
object-fit-images）仅在检测到不支持时加载，但增加 JS 依赖和首屏延迟
真正容易被忽略的点是：你写的每一条object-fit规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你。尤其在 SSR 首屏、图片懒加载、或动态插入 DOM 的场景下，“盒子”可能瞬时坍缩，导致变形闪现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
