Estoy tratando de hacer que una imagen se ajuste solo al 50% de la pantalla en NextJS. NextJS proporciona un componente de imagen que tenemos que usar y no el elemento de imagen. Ese componente de imagen ya tiene su propio estilo en línea para el elemento de imagen y lo envuelve en un elemento de intervalo con estilo. Actualmente envuelvo ese componente de imagen en una etiqueta de intervalo para poder diseñarlo, pero me resulta difícil hacer que se ajuste solo al 50% de la pantalla.

Código:

 <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; } } }

He aquí una representación visual:

representación visual