如何解决如何实现具有固定宽度和动态高度的 Next.js Image 组件以保持图像的尺寸?
图片来自 SanityCMS,我当前的代码(ChakraUI 样式)是:
<Box w="500px" h="500px" bg="red">
<Image
src={allArtPieces[0].imageUrl}
alt={allArtPieces[0].title}
width="500px"
height="500px"
/>
</Box>
我想让图像的宽度填充容器和图像以保持其自然尺寸。我已经尝试将图像的宽度设置为 100% 并省略高度样式道具,但是,下一个图像组件要求我声明一个高度变量。关于如何实现我的目标功能的任何想法?
解决方法
您可以按照您所说的或从 API
保持宽度为 100%,并且对于高度,使用 API
中由 SanityCMS
给出的图像的高度值来保持自然尺寸你的形象。
在控制台中记录 allArtPieces[0]
的结果,应该有你图像的高度值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。