reactjsnext.jsnext-images

Next JS responsive image with custom size

I'm trying to implement an image grid like in AirBnB with Next JS. so I'm Using Next Image with responsive layout. but i wanted to make the image square. meaning the height and width should be the same. but when in responsive layout the image is set with it's original size. i even tried to make the object fit cover.

<div className="relative flex flex-col -z-10">
      <Image
        src={"/profile.webp"}
        layout="responsive"
        objectFit="cover"
        height={100}
        width={100}
      />
    </div>

how can i achieve that?

Solution

  • this is the code that worked for me, if anyone looks for this maybe it will be useful.

          <div className="w-full relative pt-[100%]">
        <Image
          src="/profile.webp"
          alt="profile"
          objectFit="cover"
          fill
          className="w-full h-full top-0 left-0 object-cover rounded-2xl"
        />
      </div>