0

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?

Mohammed Bekele
  • 727
  • 1
  • 9
  • 25

2 Answers2

2

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>
Mohammed Bekele
  • 727
  • 1
  • 9
  • 25
  • Thanks! It worked like a charm. There aren't many resources for using the Image component in Next 13. P.S. I got a weird behavior by `object-cover`, for my design, `object-contain` had the best behavior (shrinking while keeping the same aspect ratio). – Hamed MP Dec 31 '22 at 00:25
  • The problem with using "fill" is that the next Image component doesn't optimize images anymore. So if your image is big and heavy, it would not change it's size or quality. – Inaara Kalani Jun 28 '23 at 09:20
  • ```pt-[50%]``` is working for me the best. thanks anyway.... – Feroz Aug 17 '23 at 06:39
0

Use this method for the NextJS 13 image: Enable experimental feature image by adding this to the next.config.js

module.exports = {
experimental: {
    images: {
        allowFutureImage: true
    }
  },
}

By enabling this, you can now add style or classes directly to the image components.

<Image
    src={data.image}
    width="0"
    height="0"
    sizes="100vw"
    className="w-full h-auto"
/>
raqibnur
  • 59
  • 1
  • 7