为何图片无法占满容器可用空间？React组件布局问题求助

你的图片无法占满容器，大概率是图片元素的默认样式特性或缺少关键配置导致的。以下是修改后的代码及说明：

修改后的SASS代码 #

.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* 消除inline-block带来的基线间隙 */
  border: none; /* 移除浏览器默认的图片边框 */
  vertical-align: middle; /* 避免底部留白 */
}

.image-container {
  position: absolute !important;
  top: -30px;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
  overflow: hidden; /* 配合object-fit裁剪超出部分 */
  box-sizing: border-box; /* 确保宽高计算包含边框/内边距 */
}

.service-image__container {
  align-items: center;
  justify-content: center;
  background: #FFFFFF; 
  border-radius: 10px; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
  padding: 10px; 
  width: 150px;
  height: 150px;
  display: flex;
  position: relative;
  text-align: center;
  box-sizing: border-box; /* 统一盒模型计算逻辑 */

  p {
    font-weight: bold;
    font-size: 14px;
    align-self: flex-end;
  }
}

关键改动说明 #

• display: block：图片默认是inline-block类型，会产生基线对齐的间隙，改为块级元素可彻底消除这类留白。
• border: none：移除浏览器为图片元素默认添加的边框，避免加载状态或样式冲突导致的意外留白。
• overflow: hidden：配合object-fit: cover确保图片超出容器的部分被裁剪，不会溢出显示。
• box-sizing: border-box：统一所有容器的盒模型计算方式，避免padding、边框导致实际尺寸和设置值不符。

另外，也可以检查下图片源文件是否自带透明边距，若图片本身有空白区域，也会出现看起来没占满容器的情况。

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