有没有办法让 NextJS Image 组件按宽度填充其父容器并以高度响应以保持其尺寸？

Question

我想并排放置两个 Next JS 图像组件并按宽度填充屏幕（当然，需要一些填充），但有一个响应高度来保留图像的尺寸。

这是我的代码：

<div className='flex flex-row p-4 border w-full justify-center'>

            <div className='w-1/2 h-screen border relative'>
                <Image src="{src}" layout='fill' />
            </div>

            <div className='w-1/2 h-screen border relative'>
                <Image src="{src}" layout='fill' />
            </div>
 </div>

显然，在父 div 上指定宽度和高度并在图像上填充不会保留其尺寸，所以我的直觉是使用 h-max 来设置宽度并让它填充图像高度，但在屏幕上它是空的因为没有东西可以填...

Answer 1

您可以使用的一件事/黑客是用div包装<Image>并向该 div 添加类（如h或w ）并将图像的布局设置为响应式，即layout=responsive 。 这将允许图像随着尺寸的变化而变化。