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>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