Encountering an issue when trying to display multiple images in nextjs. I noticed that without setting position: relative for the parent element and position: absolute for the child element, along with specific height and width values for the Image itself, I struggled to adjust the image size using CSS based on changes in viewport dimensions.
<Image src={partners.img} width={50} height={50} alt="partners"/>
//css
.partnersWrapper {
position: relative;
}
.partnerItem {
width: 10rem;
height: 10rem;
position: absolute;
}
However, when I include layout={'fill'} for the Image component, the images achieve the desired size, but they start overlapping each other instead of wrapping onto new lines. Can you point out what might be going wrong here?
<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>