Next image

[ornate sable]

I have a question about Next Image.
I have a remote image, in which the aspect ratio is > 1 (i.e. a rectangle). I would like to display it as a square, in which I expect part of the image to be cut off/hidden. How may I do that?

I tried to specify the width and height to be 56px, i.e. the desired size, but because the image is something like 200x100px, the image is actually scaled down to 56x28px, which is not what I'm hoping.

[mighty lava]

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

---

To display a remote image as a square and crop it, you can use a combination of the next/image component and CSS. First, set the width and height props to the desired size (56px in your case). Then, wrap the Image component in a container div and apply CSS to achieve the cropping effect.

Here's an example:

import Image from 'next/image';

export default function Page() {
  return (
    <div style={{ width: '56px', height: '56px', overflow: 'hidden', position: 'relative' }}>
      <Image
        src="https://example.com/your-remote-image.jpg"
        alt="Your image description"
        width={56}
        height={56}
        layout="fill"
        objectFit="cover"
      />
    </div>
  );
}

In this example, we set the container div's width and height to 56px and hide the overflow. We also set the Image component's layout prop to "fill" and objectFit to "cover" to ensure the image covers the entire container while maintaining its aspect ratio. This will result in the image being cropped and displayed as a square.

Keep in mind that you need to provide the width and height props for remote images, as Next.js doesn't have access to remote files during the build process (source (https://nextjs.org/docs/basic-features/image-optimization#remote-images)).

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

@ornate sable kapa.ai is still learning and improving, please let us how it did by reacting below

[ornate sable]

@vernal siren does this help? 😄

[vernal siren]

I tried the ai already before asking. No it doesn't

I kind of make it work with fill, although not ideal because the image size can be larger than it has to for a specific aspect ratio