应使用background-image配合background-size: cover填满容器，因<img>设width: 100%; height: 100%会拉伸变形，object-fit: cover虽可解决但IE不支持；background-image兼容性更好、控制更稳。
图片填充容器的关键不是 <img> 标签本身，而是用 background-image 配合 background-size 控制——直接用 <img> 无法真正“填满又不拉伸变形”。
为什么 <img> 的 width/height 设为 100% 不行？
设成 width: 100%; height: 100% 会让图片强行拉伸填满，宽高比被破坏。而 object-fit 虽然能解决（见下一点），但 IE 完全不支持，老项目慎用。
-
object-fit: cover是最接近“填充且保持比例”的方案，但需配合object-position调整裁剪起始点 -
<img>默认是替换元素，其尺寸行为和普通块级元素不同，max-width: 100%等约束常失效 - 如果容器尺寸动态变化（比如响应式卡片），
<img>很难稳定居中+裁剪
推荐做法：用 div + background-image + background-size: cover
这是兼容性最好、控制最稳的方式，尤其适合头图、卡片背景、轮播图等场景。
<div class="hero-img" style="
width: 300px;
height: 200px;
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
"></div>-
background-size: cover→ 缩放图片使其完全覆盖容器，可能裁剪边缘 -
background-position: center→ 默认居中，也可写top left或50% 30%精确控制裁剪区域 - 若要“完整显示+留白”，改用
background-size: contain，但此时无法填满容器 - 注意：CSS 中的
url()路径需相对 HTML 文件，不是相对 CSS 文件（除非写在 .css 文件里）
object-fit 在现代项目中怎么安全用？
只在明确支持 ES6+ 和 Chrome/Firefox/Safari/Edge 84+ 的项目里用，必须加 fallback。
立即学习“前端免费学习笔记（深入）”；
<div class="card">
<img src="photo.jpg" alt="" class="card-img">
</div>
<p><style>
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
/<em> 可选 fallback：IE 下显示原图，不裁剪 </em>/
@supports not (object-fit: cover) {
.card-img { height: auto; }
}
</style>-
object-fit值可选：cover（填满裁剪）、contain（等比缩放留白）、fill（拉伸填满，慎用） -
object-position单位支持像素、百分比、关键词，比如20% 70%表示横向 20%、纵向 70% 处对齐 - 不要给
<img>同时设width/height和min-width/max-height，容易冲突
真正麻烦的不是写哪行代码，而是想清楚你要的是“裁剪优先”还是“保全优先”——前者选 cover，后者选 contain；而 background-image 方案虽然多写几行 CSS，但在 Safari 旧版、微信内置浏览器等环境更稳。别忘了测试真实设备上的裁剪结果，center 并不总等于“人物脸部在中间”。
