imagenext.jsobject-fit

How to use objectFit for Next.js 13 <Image>?

In the next/image docs under version history, it states the following for v13.0.0:

layout, objectFit, objectPosition, lazyBoundary, lazyRoot props removed.

Under next/image docs for fill the documentation states we can set the object fit with object-fit: "contain" or alternatively to object-fit: "cover". I am unable to set the object fit to cover with the following code:

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

How does one implement object-fit with Next.js 13?

Solution

  • NextJS Image component now supports style prop so I believe this is the right answer:

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

    Parent container is relatively positioned.