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:
Can you do it like this:
.authpages_section set width: 50%max-width: 100%Update
To achive what you need to do it remove the layout="fill" property,
so your component will actually look like:
<Image
src={HeroImg}
alt="an hero img"
/>