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

Posted 2023-03-06

【中文标题】使用 next.js 调整窗口大小时无法居中我的图像

【英文标题】：unable to center my images when resizing window with next.js

【发布时间】：2021-05-13 02:07:50

【问题描述】：

我正在使用 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"
                    
                    width=500
                    height=500
                  />
                </div>
                <div className=styles.img>
                  <Image
                    src="/images/climbing.jpg"
                    
                    width=500
                    height=500
                  />
                </div>
                <div className=styles.img>
                  <Image
                    src="/images/karate.jpg"
                    
                    width=500
                    height=500
                  />
                </div>
                <div className=styles.img>
                  <Image
                    src="/images/beach.jpg"
                    
                    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;
  

【参考方案1】：

这似乎有效：

.pictures 
  text-align: center;


.img 
  border-radius: 23px;

沙盒：https://codesandbox.io/s/vigorous-sun-smwow

【讨论】：

请注意。图像保持居中，但我的图像必须具有相同的尺寸，并且比例必须与响应保持一致。就像，如果它们是方形的，它们必须保持方形。添加您的代码并不能解决我的问题。

@FlorieAnstett 我只使用了不同的维度作为示例。再次检查沙箱。我把所有的图像都做成了正方形。

确实如此。我不知道为什么它不适用于我的应用程序。如果我应用此代码，图像的宽度会变得很薄，但高度会保持不变。