1

I have this Codesandbox

I can't understand why the image here looks like this: repeatedly being displayed please advice. This only happens when image ratio is 1:5

enter image description here

This code is this in AnimatedList.jsx:

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

And the styles.scss

  .media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    top: 0;
    left: 0;
    border-radius: 16px;
    background-size: cover;
  }
halfer
  • 19,824
  • 17
  • 99
  • 186
Kid
  • 1,869
  • 3
  • 19
  • 48

1 Answers1

2

You need to apply the background repeat in your scss class.

background-repeat: no-repeat;
James
  • 2,516
  • 2
  • 19
  • 31