I'm using Next.js and the Image component. My problem is when I resize the window my image does not stay centered.
I've tried margin auto, display flex with justify-content and align content centered, object-fit and object position.
I also tried every layout options for the Image component.
The top of the image gets crop when I resize to a bigger window or the height stays the same but the width becomes wider so that proportions does not stay.
(I simplified the code to the images)
<section className={styles.click}>
<div className="container">
<h2>Clique, trouve, bouge</h2>
<p>
Tu veux te dépenser, faire une activité de relaxation ou juste aller
marcher. Bouge cartographie pour toi tous les spots publics, les
associations, les studios privés et les activités de groupe dans ta ville.
</p>
<div className={styles.pictures}>
<div className={styles.img}>
<Image src="/images/city.jpg" alt="" width={500} height={500} />
</div>
<div className={styles.img}>
<Image src="/images/climbing.jpg" alt="" width={500} height={500} />
</div>
<div className={styles.img}>
<Image src="/images/karate.jpg" alt="" width={500} height={500} />
</div>
<div className={styles.img}>
<Image src="/images/beach.jpg" alt="" width={500} height={500} />
</div>
</div>
</div>
</section>
CSS:
.click .pictures {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.img {
object-fit: cover;
object-position: center;
border-radius: 23px;
}
This seems to work:
.pictures {
text-align: center;
}
.img {
border-radius: 23px;
}