最稳妥方案是 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 和容器尺寸。