如何使用 Next JS Image 组件为容器提供动态宽度？

如何解决如何使用 Next JS Image 组件为容器提供动态宽度？

所以，我有一个容器 div 和一个 Image 组件。我希望图像高度等于容器高度的 100%，并且容器的宽度根据图像的宽高比自动决定。当我使用普通的 img 标签时，这没有问题，但在 Next Image 组件的情况下，图像的宽度为 0px。因为它要我为容器定义一个固定的宽度。 ?我怎样才能实现我想要的？

我正在做的是：

对于 div：

div {
   height: 50px;
   width: auto;
}

对于图像组件：

<Image src="..." alt="..." layout="fill" />

解决方法

我认为最直接的方法是在 ems 或 rems 中定义 div 的宽度，并为图像定义相同的宽度，以便它是精确的长度和父级元素与图像和 div 本身有一个比率。 祝你有美好的一天:)

,

据我所知，next js 中的图像有一个很大的优势，延迟加载保留图像将使用一次的空间，而不会破坏布局。

现在，如果我们不提前传递图像的大小，那将是不可能的。

知道它的极限。所以，我打赌这个原因。

这就是我使用大量 img 而不是 Image 的原因。但是如果你知道确切的尺寸……最好使用 Image。

附注。 Google 开发者参与了我刚刚描述的功能开发。