div内图片适配SCSS问题：背景边缘异常显示求助

1. 修正图片的盒模型与对齐方式 #

object-fit:contain时底部/右侧出现微小缝隙，大概率是图片默认的inline元素基线对齐特性导致的，先做基础样式修正：

• 给图片添加display: block，消除inline元素自带的基线间距
• 给容器和图片统一设置box-sizing: border-box，避免padding、border干扰尺寸计算

.image-container {
  width: 800px; /* 替换为你的容器宽度 */
  height: 400px; /* 替换为你的容器高度 */
  background-color: #000;
  overflow: hidden;
  box-sizing: border-box;
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

2. 处理浏览器小数像素渲染误差 #

如果上述调整后仍有细微缝隙，是浏览器对小数像素的四舍五入渲染导致的。可以让图片轻微超出容器，再通过容器的overflow:hidden裁切掉多余部分：

.image-container img {
  /* 保留原有样式 */
  min-width: 100.1%;
  min-height: 100.1%;
}

3. 匹配需求的适配逻辑验证 #

这套样式完全贴合你的需求：

• 当图片宽高比与容器一致（或图片足够大）：object-fit:contain会让图片按比例缩放至刚好填满容器，容器黑色背景完全被覆盖
• 当图片宽度不足、高度可铺满容器：object-fit:contain会让图片高度适配容器，宽度空缺部分由容器的黑色背景填充，仅左右显示黑边

如果容器是响应式宽度（如百分比、vw单位），直接沿用上述样式即可，object-fit:contain会自动根据容器尺寸调整图片缩放比例。

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