невозможно центрировать мои изображения при изменении размера окна с помощью next.js

Question

Я использую Next.js и компонент. Моя проблема в том, что когда я изменяю размер окна, мое изображение не остается по центру.

Я пробовал автоматическое поле, гибкость отображения с выравниванием содержимого и выравнивание содержимого по центру, соответствие объекта и положение объекта.

Я также пробовал все варианты макета для 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;
  }

Answer 1

Кажется, это работает:

      .pictures {
  text-align: center;
}

.img {
  border-radius: 23px;
}

Песочница: https://codesandbox.io/s/vigorous-sun-smwow