object-fit 支持 fill、contain、cover、scale-down 等值：fill 强制拉伸变形；contain 等比缩放留白；cover 等比填满裁剪；scale-down 取 none 与 contain 中更小者。
图片变形不是因为 HTML5 布局本身有问题，而是 <img alt="HTML5布局为何图片变形_objectfit属性控制图片显示形态的用法【教程】" > 默认按原始宽高比拉伸填充容器，当容器宽高比与图片不一致时，就会被压扁或拉长。解决它不用 JS 或额外 wrapper，直接用 CSS 的 object-fit 就行。
object-fit 支持哪些值？各有什么表现
object-fit 控制的是替换元素（如 <img alt="HTML5布局为何图片变形_objectfit属性控制图片显示形态的用法【教程】" >、<video></video>）的内容如何适应其盒模型。浏览器支持良好（Chrome 32+、Firefox 36+、Safari 10+、Edge 16+），IE 完全不支持。
常用取值及行为：
-
fill：强行填满容器，忽略原始宽高比 → 图片一定变形 -
contain：等比缩放，完整显示全部内容 → 容器内可能留白 -
cover：等比缩放并填满容器 → 部分内容被裁剪，但无变形 -
scale-down：效果是none和contain中更小的那个 → 适合响应式兜底
为什么 img 设置 width/height 后还是变形
很多人给 <img alt="HTML5布局为何图片变形_objectfit属性控制图片显示形态的用法【教程】" > 写了 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 是另一套机制，不适用于 <img alt="HTML5布局为何图片变形_objectfit属性控制图片显示形态的用法【教程】" > 标签本身。
容易被忽略的兼容性与调试点
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。
