为什么图像在这种背景下反复布局

问题描述

我有这个Codesandbox

我不明白为什么这里的图像看起来像这样：反复显示请建议。这仅在图像比例为 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;
  }

解决方法

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

background-repeat: no-repeat;