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

Question

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

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

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

Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.

这让我很困惑，因为根据 the docs ，使用 layout="fill" 时不需要这些属性.

Answer 1

这对我有用:

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>