如何实现具有固定宽度和动态高度的 Next.js Image 组件以保持图像的尺寸？

Posted 2023-03-06

【中文标题】如何实现具有固定宽度和动态高度的 Next.js Image 组件以保持图像的尺寸？

【英文标题】：How can I implement a Next.js Image component with a fixed width and dynamic height to keep the image's dimensions?

【发布时间】：2021-09-21 09:26:05

【问题描述】：

图片来源于 SanityCMS，我目前的代码（ChakraUI 样式）是：

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

我想让图像的宽度填充容器并保持图像的自然尺寸。我已经尝试将图像的宽度设置为 100% 并省略高度样式属性，但是，下一个图像组件要求我声明一个高度变量。关于如何实现我的目标功能的任何想法？

【参考方案1】：

您可以将宽度保持为 100%，如您所说或来自 API 以及高度使用来自 API given by SanityCMS 的图像高度值，以保持图像的自然尺寸。

在控制台中记录allArtPieces[0]的结果，应该有你图片的高度值。