How can I implement a Next.js Image component with a fixed width and dynamic height to keep the image's dimensions?

Question

The image is sourced from SanityCMS, and the current code (ChakraUI styling) I have is:

<Box w="500px" h="500px" bg="red">
  <Image
    src={allArtPieces[0].imageUrl}
    alt={allArtPieces[0].title}
    width="500px"
    height="500px"
  />
</Box>

I would like to have the width of the image fill the container and the image to keep its natural dimensions. I have already tried setting the width of the image to 100% and leaving out the height style prop, however, the Next Image component requires that I declare a height variable. Any ideas on how I can achieve the functionality I'm aiming for?

Answer 1

You can keep width as 100% as you said or from API and also for height use the value of height of the image from API given by SanityCMS to keep the natural dimensions of your image.

Log the result of allArtPieces[0] in console and there should be the value of height of your image.