有没有办法使NextJS映像组件填充其父容器的宽度并以高度响应以保持其尺寸？
我想并排有两个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来设置宽度并填充图像高度，但是在屏幕上它是空的，因为没有什么可填充...
I would like to have two Next JS image components side-by-side and fill the screen width-wise (with a bit of padding, of course) but have a responsive height to preserve the images' dimensions.
Here is my code:
<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>
Obviously, specifying a width and height on the parent div and fill on the image will not preserve its dimensions, so my instinct was to use h-max instead to set a width and have it fill the image height, but on screen it is empty since there is nothing to fill...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用的一件事/骇客是用
＆gt;用div将类添加到此div（例如h）或w），并将图像响应式IE布局的布局=响应。这将使图像随着尺寸的变化而波动。One of the things/hacks you can use is to wrap the
<Image>with adivand add classes to this div (likehorw) and put the layout of the image responsive i.e.layout=responsive. This will allow the images to be volatile with changing dimensions.