css - Next.js Image- 如何保持纵横比并在需要时添加信箱

Question

我有一个 Next.js 应用程序区域，它是照片库的选定照片，因此当人们翻阅选定的图像或加载照片时，它必须保持固定大小。我有一个响应式布局，但如果真的按下，我会说这个像素区域是 566px*425px。
我对如何真正做到这一点感到困惑。这是我能得到的最接近的结果，但问题是当纵横比超过 566x425 时我会溢出图像，而对于纵横比低于 566x425 的图像，它会在 Y 方向上拉伸(stretch)它。我真正想要的是有一个固定框，然后如果纵横比与最大尺寸不同，您会在两侧或顶部和底部看到信箱。

           <div
            style={{
              position: 'relative',
              width: '566px',
              height: '425px',
            }}
          >
            <Image
              src={currCommit.image.url}
              alt="Current Image"
              layout={'fill'}
              objectFit="cover"
            />
          </div>

Answer 1

哦，我明白了!关键是将父 div 设置为固定大小和相对大小，然后设置 Image到填充布局和包含的 objectFit。这种方法的唯一缺点是我需要设置媒体查询，以便它可以扩展到较小的尺寸。

<div className="relative item-detail">
  <Image src={currCommit.image.url} alt="Current Image" layout={'fill'} objectFit={'contain'} />
</div>

然后在我设置的css中:

.item-detail {
  width: 300px;
  height: 225px;
}