如何在 NextJS 中使图像仅占屏幕的 50%
我试图在 NextJS 中使图像仅占屏幕的 50%。 NextJS 提供了我们必须使用的 Image 组件，而不是 image 元素。该 Image 组件已经具有自己的图像元素内联样式，并将其包装在样式化的 span 元素中。 目前，我将该 Image 组件包装在 span 标签中，以便可以对其进行样式设置，但我发现很难使其仅适合屏幕的 50%。
代码：
<div className='pagewrapper'>
<section className='authpages_section'>
<span className='authpages_heroimg'>
<Image src='/assets/hero.png' alt='an hero img' />
</span>
</section>
<section className='authpages_section'>
<Logo />
<div>{children}</div>
</section>
</div>
styling:
.pagewrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.authpages {
&_section {
flex-basis: 50%;
height: 100vh;
}
&_heroimg {
display: inline-flex;
}
}
}
这是一个视觉表示：
I'm trying to make a image fit only 50% of the screen in NextJS. NextJS provides an Image component that we have to use and not the image element. That Image component already has its own inline styling for the image element and wraps it in a styled span element.
Currently I wrap that Image component in a span tag so I can style it but I'm finding it difficult to make it fit only 50% of the screen.
Code:
<div className='pagewrapper'>
<section className='authpages_section'>
<span className='authpages_heroimg'>
<Image src='/assets/hero.png' alt='an hero img' />
</span>
</section>
<section className='authpages_section'>
<Logo />
<div>{children}</div>
</section>
</div>
styling:
.pagewrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.authpages {
&_section {
flex-basis: 50%;
height: 100vh;
}
&_heroimg {
display: inline-flex;
}
}
}
Here's a visual representation:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以这样做吗：
.authpages_section设置width: 50%max-width： 100%更新
要实现您的需要，请删除
layout="fill"属性，所以你的组件实际上看起来像这样：
Can you do it like this:
.authpages_sectionsetwidth: 50%max-width: 100%Update
To achieve what you need, remove the
layout="fill"property,so your component will actually look like this: