La imagen está bien si no es a pantalla completa , pero con pantalla completa , hay un área blanca a la derecha (probablemente porque la imagen no es lo suficientemente grande). ¿Cómo hago que la imagen se estire automáticamente para que su ancho cubra la pantalla completa?
CSS (ver .landingImage):
.body { margin: 0px, 50px; } .home { margin-left: 20px; margin-right: 20px; padding: 5px 5px; } .landingImage { z-index: 0; background-size: cover; top: 0; padding: 0; display: block; margin: 0 auto; width: 100vw; }index.js (construido usando nextjs):
<Head> ... </Head> <div id="wrapper"> <Image className={indexStyles.landingImage} src={orcas} /> </div> <div className={indexStyles.home}> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" ></meta> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" ></link> </Head> <body> ... </body> </div>ancho probado: 100% tampoco funcionó
del documento
Al usar layout='fill', el elemento principal debe tener una posición: relativa
Esto es necesario para la representación adecuada del elemento de imagen en ese modo de diseño.
Lo que puedes hacer es:
CSS:
agregue relative a la clase landingImage y elimine el margen auto
.landingImage { z-index: 0; background-size: cover; top: 0; padding: 0; display: block; width: 100vw; position: relative; }Envolver imagen en el div
<div className='landingImage '> <Image layout='fill' // required objectFit='cover' // change to suit your needs src='orcas' // /> </div>