使用 next.js 调整 window 大小时无法将我的图像居中

Question

我正在使用 Next.js 和 Image 组件。我的问题是当我调整 window 大小时，我的图像没有居中。

我已经尝试过 margin auto、display flex with justify content 和 align content centered、object-fit 和 object position。

我还尝试了 Image 组件的每个布局选项。

当我调整到更大的尺寸时，图像的顶部会被裁剪 window 或高度保持不变但宽度变宽，因此比例不会保持不变。

（我把代码简化成图片）

     <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

使用 next.js 调整 window 大小时无法将我的图像居中

unable to center my images when resizing window with next.js

image

responsive

next.js

nextjs-image