Next.js 图像 - 如何保持宽高比并在需要时添加信箱

Question

我的 Next.js 应用程序有一个区域，它是照片库中选定的照片，因此当人们翻阅选定的图像或加载照片时，它必须保持固定的大小。我有一个响应式布局，但如果真的按下，我会说这个像素区域是 566px*425px。

我对如何实际做到这一点感到困惑。这是我能得到的最接近的结果，但问题是，当纵横比超过 566x425 时，图像会溢出，而对于纵横比低于 566x425 的图像，它将在 Y 方向上拉伸。我真正想要的是有一个固定的盒子，然后如果纵横比与最大尺寸不同，您会在侧面或顶部和底部看到信箱。

           <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为 fill 的布局和 contains 的 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;
}

Answer 2

我认为有更好的解决方案，NextImage有回调属性onLoadingComplete：

图像完全加载并且占位符被删除后调用的回调函数。

onLoadingComplete 函数接受一个参数，一个具有以下属性的对象：naturalWidth、naturalHeight

您可以使用自然属性来设置图像比例，而不会失去 NextImage 的layout功能，如下所示：

const NaturalImage = (props: ImageProps) => {
  const [ratio, setRatio] = useState(16/9) // default to 16:9

  return (
    <NextImage
      {...props}
      // set the dimension (affected by layout)
      width={200}
      height={200 / ratio}
      layout="fixed" // you can use "responsive", "fill" or the default "intrinsic"
      onLoadingComplete={({ naturalWidth, naturalHeight }) => 
        setRatio(naturalWidth / naturalHeight)
      }
    />
  )
}

唯一的缺点是宽高比仅在图像加载后应用，因此占位符使用默认比例（在本例中为 16:9 - 常见），这可能会导致CLS

Answer 3

从 Next13 开始，layout 和 objectFit 已被弃用，取而代之的是内在样式属性。这实际上使我们的工作变得更容易，因为您现在可以使用常规 CSS 设计图像样式，如下所示：

import Image from "next/image";

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