Revision history [back]

The process of utilizing objectFit in Next.js 13 with the <image> tag involves the following steps:

1. Import the <image> component from the 'next/image' module.

import Image from 'next/image';

1. Use the <image> tag to display the image with the necessary attributes.

<Image src="/my-image.jpg" alt="My Image" width={300} height={200} objectFit="cover" />

1. In the <image> tag, set the objectFit attribute to the required value (like "cover", "contain").

This will set the object-fit CSS property on the tag that is rendered in the browser to fit the image within the specified dimensions and with the required object-fit attribute.