React背景图片四周出现空白，求可行解决办法

我编写了如下React组件代码：

const CategoryItem = ({ imageUrl, title }) => {
  return (
    <div className='category-container'>
      <div
        className='category-container__bg'
        style={{ backgroundImage: `url(${imageUrl})` }}
      ></div>
      <div className='category-container__body'>
        <h2>{title}</h2>
        <p>Shop Now</p>
      </div>
    </div>
  );
};

并使用Sass编写了对应的样式：

.category-container {
  align-items: center;
  border: 5px solid #000;
  display: flex;
  flex: 1 1 30%;
  height: 25rem;
  justify-content: center;
  margin: 10px;
  overflow: hidden;

  &__bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    transition: transform 1.5s ease;
    width: 100%;
  }

  &__body {
    align-items: center;
    background-color: white;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    height: 7rem;
    justify-content: center;
    opacity: 0.7;
    padding: 0 1.5625rem;
    position: absolute;
    transition: opacity 1s ease;

    h2 {
      color: #4a4a4a;
      font-size: 1.375rem;
      font-weight: bold;
      margin: 0 0.375rem 0;
    }

    p {
      font-size: 1rem;
      font-weight: lighter;
    }
  }

  &:hover {
    cursor: pointer;

    .category-container__bg {
      transform: scale(1.05);
    }

    .category-container__body {
      opacity: 0.9;
    }
  }
}

尽管已经给背景图设置了background-size: cover属性，但背景图片四周仍出现奇怪的空白（如下图所示）。尝试调整边框无法解决问题，请问有什么可行的解决办法？

问题原因 #

核心问题在于flex布局的特性：.category-container是flex容器，且设置了align-items: center和justify-content: center，这会让作为flex子项的.category-container__bg即使设置了width: 100%和height: 100%，也无法完全填满容器的内容区，最终露出容器的默认背景色（白色），形成四周的空白。此外，容器未设置position: relative，导致内部绝对定位的文字容器定位基准也存在隐患。

解决办法 #

修改Sass样式，通过绝对定位确保背景图填满容器，同时修正容器的定位属性：

.category-container {
  border: 5px solid #000;
  display: flex;
  flex: 1 1 30%;
  height: 25rem;
  margin: 10px;
  overflow: hidden;
  position: relative; /* 添加相对定位，作为内部绝对定位元素的基准 */
  /* 移除align-items和justify-content，因为背景图改为绝对定位，无需flex居中 */

  &__bg {
    position: absolute; /* 改为绝对定位 */
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    transition: transform 1.5s ease;
  }

  &__body {
    align-items: center;
    background-color: white;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    height: 7rem;
    justify-content: center;
    opacity: 0.7;
    padding: 0 1.5625rem;
    position: absolute;
    transition: opacity 1s ease;

    h2 {
      color: #4a4a4a;
      font-size: 1.375rem;
      font-weight: bold;
      margin: 0 0.375rem 0;
    }

    p {
      font-size: 1rem;
      font-weight: lighter;
    }
  }

  &:hover {
    cursor: pointer;

    .category-container__bg {
      transform: scale(1.05);
    }

    .category-container__body {
      opacity: 0.9;
    }
  }
}

另一种可选方案（保留flex布局） #

如果希望继续使用flex布局，只需给.category-container__bg添加flex: 1，让它自动填满flex容器的可用空间，同时确保容器的align-items设置为stretch（默认值，可显式设置）：

.category-container {
  align-items: stretch; /* 显式设置拉伸子项 */
  border: 5px solid #000;
  display: flex;
  flex: 1 1 30%;
  height: 25rem;
  justify-content: center;
  margin: 10px;
  overflow: hidden;
  position: relative;

  &__bg {
    flex: 1; /* 添加flex:1，让子项填满容器 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 1.5s ease;
    /* 可移除width和height，flex:1会自动填充 */
  }

  /* 其余样式保持不变 */
}

这两种方案都能让背景图完全填满容器，消除四周的空白，同时保留原有的hover动画效果。

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