Centering next image component contents

[eternal wind]

I currently have a next image component fit inside another div.

I'm trying to center the content using object cover, but it seems like the image is still full size and just now showing the overflow, how cn I center it within the visible area?

[tacit mural]

Hi @eternal wind. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To center the content of the Next.js Image component, you can use the objectFit and objectPosition CSS properties. The objectFit property defines how the content should be resized to fit its container, and objectPosition defines the position of the content within the container.

Here's an example of how you can use these properties:

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="300px"
        fill
        style={{
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />
    </div>
  )
}

In this example, objectFit: 'cover' will cause the image to fill the entire container and be cropped to preserve aspect ratio. objectPosition: 'center' will position the image at the center of the container.

Remember, for this to look correct, the overflow: "hidden" style should be assigned to the parent element.

For more information, you can refer to the Next.js Image component documentation (https://nextjs.org/docs/app/api-reference/components/image#fill).

Please note that the fill prop in the Next.js Image component causes the image to fill the parent element, which is useful when the width and height are unknown. The parent element must assign position: "relative", position: "fixed", or position: "absolute" style. By default, the img element will automatically be assigned the position: "absolute" style (source (https://nextjs.org/docs/app/api-reference/components/image#fill)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: