Image 如何在Next.js中使用宽度和高度未知的图像组件

从版本10开始，Next.js自带了内置的

Image

组件，该组件提供了图像优化和相应调整图像大小的功能。我非常喜欢它，我一直在我的网站上使用它来制作固定大小的图片。根据官方文件，宽度和高度是必需的道具，除非是用于

layout=fill

现在，我想使用

图像

组件，即使我事先不知道宽度和高度。我有来自CMS的博客资源，其中图像的确切大小未知。在这种情况下，是否有任何方法可以使用

Image

组件

---

任何帮助都将不胜感激。

是的，您可以将其与您提到的

layout=fill

选项一起使用

在这种情况下，您需要为图像设置“纵横比”

您也可以使用

objectFit=“cover”

，它将放大图像以填充所有容器

---

这种方法的缺点是将附加到您指定的

宽度，它可以是相对的，如“100%”或绝对的，如“10rem”，但无法根据图像大小自动设置宽度和高度，或者至少还没有。我不想提前设置纵横比，可能会使图像失真。哦，好吧，我想我现在必须坚持使用
img
。谢谢你的回答。