如何在Next.js 13的<Image>组件中实现object-fit？

Next.js 13的next/image组件移除了layout、objectFit等旧属性，你之前的代码存在两个问题：一是保留了已废弃的layout="fill"属性，二是直接在组件上写object-fit属性无效，需要通过CSS方式设置。

正确的实现方式有两种：

方法一：通过style属性直接设置 #

<div className="relative">
  <Image
    src=""
    alt=""
    fill={true}
    style={{ objectFit: 'cover' }}
  />
</div>

方法二：通过className配合CSS类设置 #

先在CSS文件中定义类：

.image-cover {
  object-fit: cover;
}

然后在组件中引用：

<div className="relative">
  <Image
    src=""
    alt=""
    fill={true}
    className="image-cover"
  />
</div>

原理说明：当使用fill={true}时，next/image组件会填充整个相对定位的父容器，此时通过标准的CSS object-fit属性就能控制图片在容器内的适配方式，和原生img标签的用法一致。

内容的提问来源于stack exchange，提问作者MGamboa