为什么在此背景中重复布置图像

Question

我不明白为什么这里的图片是这样的：反复显示请指教。这仅在图像比例为 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>

还有 styles.scss

  .media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    top: 0;
    left: 0;
    border-radius: 16px;
    background-size: cover;
  }

Answer 1

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

background-repeat: no-repeat;

为什么在此背景中重复布置图像

Why is image being laid out repeatedly in this background

javascript

reactjs

uppy