image - next.jsでウィンドウのサイズを変更するときに画像を中央に配置できません

Question

Next.js とImageコンポーネントを使用しています。私の問題は、ウィンドウのサイズを変更すると、画像が中央に表示されないことです。

私はmargin autoを試し、コンテンツを正当化して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;
  }