如何将下一个/图像组件设置为100%高度

我有一个 Next.js 应用程序，我需要一个图像来填充其容器的整个高度，同时根据其纵横比自动确定其宽度。

我尝试了以下方法：

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

此代码段编译成功，但在前端，我看到以下错误：

错误：带有 src "/deco.svg" 的图像必须使用 "width" 和 "height" 属性或 "unsized" 属性。

这让我困惑，因为根据该文档，在这些属性不使用的时候需要layout="fill"。

回答

<div style='width:104px;height:104px;position:relative;'>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>