Images in Nextjs-CodePudding

Faced with the problem of rendering a lot of images in nextjs When I don't set position: relative for parent and position: absolute for child and set clear height and width values for the Image itself, I can't increase or decrease the image via css depending on the viewport change.

<Image src={partners.img} width={50} height={50} alt="partners"/>

//css
.partnersWrapper {
  position: relative;
}

.partnerItem {
  width: 10rem;
  height: 10rem;
  position: absolute;
}

But when I set layout={'fill'} for Image, the images get the size I need, nevertheless, they begin to overlap each other. Instead of switching to other lines. Please tell me what I'm doing wrong?

<div className={styles.partnersWrapper}>
     <Grid container columnSpacing={3} columns={{ xs: 4, sm: 4, md: 12 }}>
        {partnersData.map((partners) => (
          <Grid item xs={2} sm={2} md={2.4} key={partners.id}>
            <div className={styles.partnerItem}>
              <Image
                src={partners.img}
                layout={"fill"}
                alt="partners"
                key={partners.id}
              />
            </div>
          </Grid>
        ))}
    </Grid>
</div>

CodePudding user response：

With fill layout make sure that the parent container partnerItem has position: relative, to fit the container width and height.