CODEWITHSUNDEEP
javascriptreactjsimagenext.jsheight
Amin Darian
Amin Darian

Reputation: 187

Keep the image ratio while giving a height in Next js

Im trying to give a 500px height to the of Next js while keeping the ratio of the image. I havent found any way to do so.

   <div className='relative text-center'>
        <Image
          layout="fixed"
          objectFit={'contain'}
          loading="lazy"
          src={image.url}
          alt={image.name}
          width={500}
          height={500}
        />
      </div>

Upvotes: 0

Views: 1802

Answers (1)

Chemi Adel
Chemi Adel

Reputation: 2165

you need to fix the height of the parent while the Image component as cover, for more info check the next/image doc

<div className='relative text-center h-96'>
    <Image
       layout="fill"
       objectFit="contain"
       src={image.url}
       alt={image.name}
   />
</div>

about 500px you can define custom height on tailwind.config.js more info on doc

Upvotes: 1

Related Questions