如何在Next.js中使用未知宽度和高度的Image组件
从版本 10 开始，Next.js 带有内置Image组件，该组件提供图像优化和响应式调整图像大小的功能。我非常喜欢它，并且一直在我的网站上使用它来处理固定大小的图像。根据官方文档， width 和 height 是必需的道具，除非是 for layout=fill.
现在，Image即使我不知道宽度和高度，我也想使用组件。我有来自 CMS 的博客资源，其中图像的确切大小未知。在这种情况下，有什么办法可以使用Image组件吗？
任何帮助，将不胜感激。
回答
是的，您可以将它与layout=fill您提到的选项一起使用。
在这种情况下，您需要为图像设置“纵横比”
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
<Image
alt="Image Alt"
src="/image.jpg"
layout="fill"
objectFit="contain" // Scale your image down to fit into the container
/>
</div>
您也可以使用objectFit="cover"它，它会放大您的图像以填充所有容器。
这种方法的缺点是将附加到width您指定的内容上，它可以是相对的，例如“100%”或绝对值，例如“10rem”，但无法根据大小设置自动宽度和高度你的形象，或者至少还没有。