用 object-fit: cover 可强制图片等比缩放并填满容器，多余部分裁剪；需配合明确宽高和 overflow: hidden，ie 不支持。
图片变形了？用 object-fit: cover 强制等比缩放填充
默认情况下，<img> 会按原始宽高比拉伸填满容器，但一旦容器宽高比和图片不一致，就会被压扁或拉长。解决办法不是改图片尺寸，而是让浏览器“聪明地裁剪”——object-fit 就是干这个的。
最常用的是 cover：保持比例、完全覆盖盒子，多余部分裁掉。适合头图、卡片图这类对构图容忍度高的场景。
-
object-fit: cover要配合明确的宽高（比如width: 100%; height: 200px），否则没效果 - 别忘了给父容器设
overflow: hidden，不然裁掉的部分可能露出来 - IE 完全不支持，如果必须兼容 IE，得用 background-image 替代
object-fit: contain 和 cover 的区别在哪
contain 是“完整显示”，图片会等比缩放到完全放进盒子内，四周留白；cover 是“填满盒子”，等比缩放后裁剪溢出部分。选哪个取决于设计需求：要保全部分内容就用 contain，要无间隙填充就用 cover。
-
contain常用于用户上传头像预览，确保五官不被切掉 -
cover更常见于响应式 banner，视觉冲击强，但要注意关键元素别放在边缘 - 两者都要求图片本身有明确宽高比，如果是 SVG 或无尺寸的图片，行为可能不稳定
为什么加了 object-fit 还没生效
最常见的原因是：图片没设置宽高，或者父容器没约束尺寸。CSS 的 object-fit 不会改变盒模型，它只控制内容如何“摆”在已有的盒子里。
- 检查图片是否设置了
width和height（哪怕只是width: 100%; height: auto） - 确认父容器有明确高度，比如
height: 300px或aspect-ratio: 16/9 - 避免和
max-width: 100%混用导致尺寸冲突 - 某些旧版 Safari（object-fit 在
<picture></picture>内的支持有问题，优先用<img>
替代方案：不用 object-fit 怎么做
如果项目要兼容 IE 或遇到 SSR 渲染问题（比如 Next.js 首屏 object-fit 不生效），可以用 background-image 模拟：
div.image-box {
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 200px;
}
缺点也很明显：图片无法被爬虫索引、不能右键保存、不支持 srcset 响应式加载。所以除非真有兼容性硬需求，否则优先用原生 object-fit。
真正容易被忽略的是：图片加载完成前，object-fit 的行为不可预测。最好配合 loading="lazy" 和占位色，或者监听 load 事件再触发样式切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
