我正在使用 Next.js 和Image组件。我的问题是当我调整窗口大小时，我的图像不会保持居中。
我试过自动边距，显示 flex 并对齐内容并对齐内容居中，对象适合和对象位置。
我还尝试了Image组件的所有布局选项。
当我调整到更大的窗口或高度保持不变但宽度变宽时，图像的顶部会被裁剪，因此比例不会保持不变。
（我将代码简化为图像）
<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;
}