object-fit: cover可强制图片等比缩放并填满容器，需配合明确宽高、overflow: hidden及width: 100%; height: 100%; display: block，IE不支持时可用background-image替代。
用 object-fit: cover 配合固定宽高最直接
图片在容器内留黑边，本质是它没“撑开”或“裁掉多余部分”。object-fit: cover 就是干这个的：保持原始比例，等比缩放后裁剪溢出区域，确保 100% 填满容器四边。
但前提是容器本身必须有明确的 width 和 height（不能是 auto 或依赖内容），否则 img 拉不到指定尺寸。
- 容器需设
overflow: hidden，防止裁剪部分意外溢出造成滚动条或布局错乱 -
img必须设width: 100%; height: 100%，仅设width: 100%+height: auto会保留原始比例但留黑边 - 别忘了移除
img默认的display: inline行为，加display: block防止基线间隙
为什么 background-image + background-size: cover 更稳
当你要的是视觉填充而非语义化图片（比如 banner、hero 区），用背景图反而更少踩坑。它不参与文档流，不受 img 的替换元素限制，也不受外边距/内边距干扰。
关键点不是“能不能”，而是“要不要保留 <img alt="HTML怎么设置图片在容器内铺满不留黑边" > 标签”——如果 SEO、可访问性（alt 文本）、懒加载或响应式 srcset 不是刚需，背景图方案更干净。
立即学习“前端免费学习笔记（深入）”；
- 容器必须显式声明
width和height，否则背景不可见 - 加
background-position: center确保焦点区域居中，避免重要人物/文字被裁掉 - 慎用
background-size: 100% 100%：它会强行拉伸，导致图片变形
position: absolute 是兜底方案，但得控好参考系
当你遇到老浏览器兼容问题，或需要叠加文字/按钮且不想被 object-fit 的裁剪逻辑干扰布局时，绝对定位是可靠选择。但它对父容器要求严格：必须设 position: relative，否则 top: 0; left: 0 会相对于视口定位。
这个方案本质是“把图钉死在容器左上角，再拉满”，所以裁剪逻辑得靠 object-fit 或 overflow: hidden 配合，不能只靠定位。
- 父容器漏写
position: relative是最常见错误，结果图飞到页面顶部左侧 - 若容器高度由内容撑开（如
height: auto），该方案会失效——必须是固定或视口单位高度（如100vh） -
z-index要合理设置，否则文字可能被图片盖住
容易被忽略的细节：路径、格式与降级
铺不满有时根本不是 CSS 问题。比如 src 路径错、图片本身分辨率太低（在大屏上被放大后模糊+边缘发虚，看起来像黑边），或者用了 WebP 但旧版 Safari 不支持。
尤其在 React + CSS Modules 环境下，相对路径容易出错；建议统一用 import 或 require() 引入图片，让构建工具校验路径有效性。
- 开发时打开浏览器开发者工具，检查 Network 面板确认图片是否 200 加载成功
- 在
img上临时加border: 1px solid red，快速判断是“没铺满”还是“图本身就有透明/空白边缘” - 加
background-color到容器上，能立刻区分是图片未覆盖，还是图片自身带 alpha 通道或白边
