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.