object-fit 支持 fill、contain、cover、scale-down 等值：fill 强制拉伸变形；contain 等比缩放留白；cover 等比填满裁剪；scale-down 取 none 与 contain 中更小者。

图片变形不是因为 HTML5 布局本身有问题，而是 默认按原始宽高比拉伸填充容器，当容器宽高比与图片不一致时，就会被压扁或拉长。解决它不用 JS 或额外 wrapper，直接用 CSS 的 object-fit 就行。

object-fit 支持哪些值？各有什么表现

object-fit 控制的是替换元素（如 、）的内容如何适应其盒模型。浏览器支持良好（Chrome 32+、Firefox 36+、Safari 10+、Edge 16+），IE 完全不支持。

常用取值及行为：

• fill：强行填满容器，忽略原始宽高比 → 图片一定变形
• contain：等比缩放，完整显示全部内容 → 容器内可能留白
• cover：等比缩放并填满容器 → 部分内容被裁剪，但无变形
• scale-down：效果是 none 和 contain 中更小的那个 → 适合响应式兜底

为什么 img 设置 width/height 后还是变形

很多人给 写了 width: 100%; height: 200px;，以为能“固定高度”，结果图片被垂直拉伸——这是因为 height 是强制生效的，而 object-fit 默认是 fill，此时浏览器优先满足尺寸指令，再套默认拉伸逻辑。

正确做法是：

• 移除显式的 height（或设为 auto），让图片自然按比例渲染
• 用 object-fit + height 组合控制视觉呈现
• 容器需有明确宽高（或由父级约束），否则 cover/contain 无法计算缩放基准

cover 和 contain 在响应式卡片中的典型写法

比如一个商品卡片，要求图片始终铺满区域且不扭曲，同时保持容器高度固定：

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center; /* 可选：控制裁剪焦点，默认 center */
}

如果希望图片完整可见（例如证件照、图标类），改用：

.icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: #f5f5f5; /* 可选：填满留白区域 */
}

注意：object-position 必须和 object-fit 搭配才生效；background-size: contain/cover 是另一套机制，不适用于 标签本身。

容易被忽略的兼容性与调试点

object-fit 在 Safari 旧版本（background-image 方案；但要注意语义丢失和 SEO 影响。

调试时常见误判：

• 容器没有设置 height，导致 object-fit: cover 看不出效果 → 检查 computed height 是否为 0
• 图片加载失败或跨域，object-fit 不触发 → 先确保图片正常渲染
• 用了 img { display: block; } 却忘了清除 inline 元素默认的基线间隙 → 留白不是 object-fit 问题，是布局问题

真正要记住的只有一句：只要容器尺寸确定，object-fit 就是控制图片“怎么塞进去”的最直接开关——不需要 flex、不需要 JS、不需要 wrapper div。