Javascript 为什么图像会在这种背景下重复排列

我有这个

我不明白为什么这里的图像是这样的：反复显示请告知。这仅在图像比率为1:5时发生

此代码在AnimatedList.jsx中如下所示：

    <Flipped
      flipId={`media-${fileId}`}
      shouldFlip={shouldFlip(fileId)}
      delayUntil={createCardFlipId(fileId)}
    >
      <div
        className="media"
        style={{
          backgroundSize: "contain",
       
          backgroundImage: "url(" + file.preview + ")",
        }}
      />
    </Flipped>

---

您需要在scss类中应用背景重复

background-repeat: no-repeat;

background-repeat: no-repeat;