Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a span element, but achieving the desired 50% screen fit is proving challenging.
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;
}
}
}
Take a look at this visual representation for reference:
visual representation