最稳妥方案是 width: 100% + height: auto；img 底部白边源于行内基线对齐，需加 display: block；object-fit: cover 适合内容图但需 overflow: hidden；background-image 更适装饰图且支持百分比定位构图。
直接用 width: 100% + height: auto 最常用也最稳妥，但“占满整个层”不等于“填满容器可视区域”——得先明确你指的“层”是内容区、固定尺寸容器，还是全屏视口。不同场景，解法完全不同。
img 标签设为 width: 100% 时为什么底部有白边？
这是 <img> 默认作为行内替换元素导致的基线对齐问题，不是 margin 或 padding。
- 必须加
display: block消除行内间隙 - 如果父容器是 flex 或 grid 布局，
align-items: center等属性可能干扰高度计算，建议显式设height: auto - 别写
height: 100%—— 它依赖父容器有明确高度，否则会失效或拉伸变形
固定宽高的容器里让图片“裁剪填满”，该用 object-fit 还是 background-image？
object-fit: cover 更语义清晰，适合内容型图片（如头像、商品图）；background-image 更可控，适合装饰性大图（如 banner、封面）。
- 用
object-fit: cover时，父容器必须设overflow: hidden，否则裁剪部分会溢出 - 用
background-image时，background-size: cover是标配，但别漏掉background-position: center，否则人脸可能被切掉 - IE11 不支持
object-fit，老项目优先选 background 方案
想让图片随容器缩放、焦点位置不变，百分比定位怎么写？
background-position: 30% 40% 不是“从左上角偏移30px”，而是让容器宽30%处与图片宽30%处对齐——这对响应式构图很关键。
- 比如人脸在原图横向 25% 处，就写
background-position: 25% center，缩放后依然居中 - 百分比值只对
background-image有效，<img>标签不支持 - 搭配
background-size: cover使用才有意义；若用contain，百分比定位效果会被留白稀释
body 上背景图不满屏？先查这三行 CSS
90% 的“不满屏”不是图片问题，是基础样式没清干净。
-
body { margin: 0 }—— 浏览器默认 8px 边距，不设就留白 -
html { height: 100% }+body { min-height: 100vh }—— 避免高度链断裂 -
background-repeat: no-repeat—— 不加的话小图会密密麻麻铺满
真正难的是构图控制：cover 裁哪、contain 留多少白、百分比定位是否精准——这些没法靠一行代码解决，得结合图片内容反复调 background-position 和容器尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
