代码之家 › 专栏 › 技术社区 › wannnwdooo

Nextjs中的图像

next.js reactjs css

wannnwdooo · 技术社区 · 2 年前

面临在nextjs中渲染大量图像的问题当我没有设置时 position: relative position: absolute height 和 width 对于图像本身的值,我不能根据视口的变化通过css增加或减少图像。

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

//css
.partnersWrapper {
  position: relative;
}

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

layout={'fill'} 对于图像,图像得到了我需要的大小,然而,它们开始相互重叠。而不是切换到其他线路。请告诉我我做错了什么?

<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>