我有一个 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"
时不需要这些属性.
最佳答案
这对我有用:
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
关于javascript - 如何将下一个/图像组件设置为 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65169431/