How to use objectFit for Next.js 13 ?

Question

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?

You set it through CSS directly. For instance, you could do: `style={{ objectFit: 'cover' }}`. See https://nextjs.org/docs/api-reference/next/image#style. — juliomalves, Oct 29 '22 at 13:16

score 38 · Accepted Answer · answered Nov 27 '22 at 14:53

38

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.

answered Nov 27 '22 at 14:53

Čedomir Babić

522
4
12

3

This saved my life - thank you. It feels like the docs on this one aren't very well explained. – barrylachapelle Feb 26 '23 at 18:14
1

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. – Čedomir Babić Feb 26 '23 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 :( – barrylachapelle Feb 27 '23 at 18:46

DevKev · Answer 2 · 2022-12-15T18:37:34.827

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:

Ochang · Answer 3 · 2023-05-02T14:10:16.540

2

I recently had this issue. I was able to solve it by using it like this.

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

edited May 02 '23 at 14:10

answered May 02 '23 at 14:08

Ochang

21
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 05 '23 at 13:35

score 1 · Answer 4 · answered Jun 10 '23 at 05:36

1

For the tailwind users:

<Image src="foo.png" alt="foo" className="object-cover" />

Of course, 'cover' can be replaced with whatever object size (fit, contain) you prefer.

answered Jun 10 '23 at 05:36

Victor Eke

109
6

score 0 · Answer 5 · edited Mar 30 '23 at 14:38

0

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>

edited Mar 30 '23 at 14:38

Lere

3
1

answered Nov 08 '22 at 00:59

TimTh

17
2

How to use objectFit for Next.js 13 ?

5 Answers5

Linked