CODEWITHSUNDEEP
javascriptcssreactjsnext.jssanity
JacobiClark
JacobiClark

Reputation: 19

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

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?

Upvotes: 0

Views: 385

Answers (1)

Dibas Dauliya
Dibas Dauliya

Reputation: 679

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.

Upvotes: 1

Related Questions