1

我有这个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;
  }
4

1 回答 1

2

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

background-repeat: no-repeat;
于 2021-01-31T17:57:53.190 回答