15

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?

1

3 Answers 3

28

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.

3
  • 2
    This saved my life - thank you. It feels like the docs on this one aren't very well explained. Feb 26 at 18:14
  • Also, I liked the old way of just defining height and width as an aspect ratio like height="3" width="4". This new way of strictly defining height and width seems dumb. Feb 26 at 20:55
  • 1
    It really is lame. I did the same thing - using height/width to inject the image ratio then layout="responsive" to size to parent. I have all my images in markdown files and the codemod doesn't run on markdown. Ugh - I have hundreds of images to fix. Python here I come :( Feb 27 at 18:46
3

In next.js both objectFit= and layout= are deprecated from the Image component and must be implemented with style or className. Fill is a boolean that is false if not applied and true if present.

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

References:

-1

Next v13 no longer supports objectFit="contain" in the Image component. The best option is using the style props.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.