CSS设置图片100%填充容器时边缘出现微小空隙如何解决？

问题原因 #

这个空隙和浏览器渲染行为有关，但属于行内元素的默认特性，不属于异常bug：
img标签默认属于行内替换元素，默认对齐方式为vertical-align: baseline，会和文本基线对齐，底部会预留出类似英文字母g、y下方的下沉空间，这个空间就会露出父容器的红色背景。另外圆角裁剪时的半像素抗锯齿也可能加重边缘漏色的表现。

可用解决方法 #

• 方案1：修改img的垂直对齐方式
  给img添加vertical-align: top或者vertical-align: middle，取消基线对齐带来的默认间隙：

img {
  width: 100%;
  height: 100%;
  vertical-align: top; /* 新增这行 */
}

• 方案2：把img设置为块级元素
  块级元素不会继承行内元素的基线对齐特性，也可以消除间隙：

img {
  width: 100%;
  height: 100%;
  display: block; /* 新增这行 */
}

• 方案3：给父容器设置font-size为0
  直接消除行内上下文的行高空间，适合父容器内只有图片没有其他文本的场景：

div {
  border-radius: 100%;
  height: 64px;
  margin: 0 auto;
  width: 64px;
  background-color: red;
  overflow: hidden;
  font-size: 0; /* 新增这行 */
}

• 方案4：补充object-fit优化填充效果（可选）
  如果担心图片拉伸变形，可以补充object-fit: cover让图片按比例裁剪填充容器：

img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover; /* 新增这行可避免图片拉伸 */
}

内容的提问来源于stack exchange，提问作者David