object-fit: cover在商品卡片中失效，是因为容器无明确高度、宽高比或overflow: hidden；必须配合aspect-ratio/height、width: 100%、height: 100%及overflow: hidden才能生效，否则静默退化为fill。
object-fit 本身不解决适配问题，它只在容器尺寸明确时才生效；移动端商品图展示失效，90% 是因为容器没高度、没比例、没 overflow: hidden。
为什么 object-fit: cover 在商品卡片里完全没反应？
浏览器看到 img 是替换元素，必须先算出“盒子有多大”，才能决定怎么缩放裁剪。如果卡片父容器是 display: flex，子项又只写了 width: 100% 没设 height 或 aspect-ratio，那这个盒子高度就是 0 —— object-fit 直接静默跳过。
常见表现：
- DevTools 里
img的 computed height 是0px或远小于预期 - 卡片内容塌陷，图片“消失”或只显示顶部一小条
- 加了
object-fit: cover却还是拉伸变形（实际是退化为fill）
移动端商品图必须锁定宽高比的三种写法
不能只靠 img 自身样式，得让容器有可推导的高度基准：
立即学习“前端免费学习笔记（深入）”；
- 现代写法（iOS 15+/Chrome 88+）：
img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }—— 不依赖父级，响应式友好 - 兼容写法（含 Safari 13.3）：父容器设
position: relative; padding-bottom: 75%，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 硬编码安全兜底（如固定卡片高度）：
.product-card img { width: 100%; height: 240px; object-fit: cover; }—— 注意别和max-width: 100%混用
cover 和 contain 在商品图中怎么选？
不是看哪个“更好看”，而是看业务语义是否允许裁剪：
-
object-fit: cover：适合主图、轮播图、列表缩略图 —— 必须填满、允许裁边；但默认object-position: center center可能切掉商品主体，建议加object-position: center top（保顶部标签/Logo）或object-position: 50% 30%（抬高焦点） -
object-fit: contain：适合详情页主图、SKU 图、证件类图 —— 必须完整可见；此时object-position基本无效，因为整张图都在框内 - 绝对避免
object-fit: fill：等同于没写，强制拉伸，商品图失真严重
iOS Safari 和安卓 WebView 的真实坑点
Can I Use 上标“支持” ≠ 真实可用：
- iOS Safari ≤13.3：对
img完全不支持object-fit，加-webkit-object-fit: cover也无效，会回退成fill行为 - 部分安卓定制 ROM 内置 WebView（如某些厂商旧版浏览器）：直接忽略该属性，图片按原始尺寸渲染
- 横屏切换、软键盘弹出、动态加载后容器重排，都可能导致
aspect-ratio失效或高度突变，建议用媒体查询 +min-height兜底
最常被忽略的细节：就算写了 object-fit: cover，如果父容器没加 overflow: hidden，裁掉的部分会溢出并撑开布局 —— 商品卡片错位、文字被遮盖，问题根源往往就在这里。
