如何实现具有固定宽度和动态高度的 Next.js 图像组件以保持图像的尺寸？
How can I implement a Next.js Image component with a fixed width and dynamic height to keep the image's dimensions?
图片来源于SanityCMS，我目前的代码（ChakraUI样式）是：
<Box w="500px" h="500px" bg="red">
<Image
src={allArtPieces[0].imageUrl}
alt={allArtPieces[0].title}
width="500px"
height="500px"
/>
</Box>
我想让图像的宽度填充容器，并让图像保持其自然尺寸。我已经尝试将图像的宽度设置为 100% 并省略高度样式道具，但是，下一个图像组件要求我声明一个高度变量。关于如何实现目标功能的任何想法？
您可以将宽度保持为您所说的 100%，或者从 API 开始，对于高度，也可以使用 SanityCMS 给出的 API 图像的高度值来保持图片的自然尺寸。
在控制台中记录 allArtPieces[0] 的结果，应该有图像的高度值。
图片来源于SanityCMS，我目前的代码（ChakraUI样式）是：
<Box w="500px" h="500px" bg="red">
<Image
src={allArtPieces[0].imageUrl}
alt={allArtPieces[0].title}
width="500px"
height="500px"
/>
</Box>
我想让图像的宽度填充容器，并让图像保持其自然尺寸。我已经尝试将图像的宽度设置为 100% 并省略高度样式道具，但是，下一个图像组件要求我声明一个高度变量。关于如何实现目标功能的任何想法？
您可以将宽度保持为您所说的 100%，或者从 API 开始，对于高度，也可以使用 SanityCMS 给出的 API 图像的高度值来保持图片的自然尺寸。
在控制台中记录 allArtPieces[0] 的结果，应该有图像的高度值。