如何使用 Next.js 13 <Image> 的 objectFit？

Question

在版本历史记录下的next/image 文档中，它对 v13.0.0 做了以下说明：

删除了布局、objectFit、objectPosition、lazyBoundary、lazyRoot 属性。

在用于填充文档状态的next/image 文档下，我们可以将对象设置为object-fit: "contain"或object-fit: "cover"。我无法使用以下代码设置对象适合覆盖：

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

如何使用 Next.js 13实现对象匹配？

Answer 1

NextJS Image 组件现在支持 style 属性，所以我相信这是正确的答案：

<div style={{position:"relative"}}>
  <Image
      src={source}
      alt=""
      fill
      style={{objectFit:"cover"}}
    />
</div>

父容器是相对定位的。

Answer 2

在 next.js 13 中，Image 组件中的objectFit和layout prop 均已弃用，必须使用style或className来实现。Fill是一个布尔值，如果不应用则为 false，如果存在则为 true。

<div className="relative">
  <Image
      src="/"
      alt="logo"
      fill
      style={{objectFit:"contain"}}
    />
</div>

参考：

如何使用 Next.js 13 &lt;Image&gt; 的 objectFit？