Tengo una aplicación Next.js y necesito una imagen que llene toda la altura de su contenedor y decida automáticamente su ancho en función de su relación de aspecto.
He probado lo siguiente:
<Image src="/deco.svg" alt="" layout="fill" />Este fragmento se compila correctamente, pero en la interfaz veo el siguiente error:
Error: la imagen con src "/deco.svg" debe usar las propiedades "ancho" y "alto" o la propiedad "sin tamaño".
Esto me confunde porque, según los documentos , estas propiedades no son necesarias cuando se usa layout="fill" .
Esto es lo que funcionó para mí:
<div style={{width: '100%', height: '100%', position: 'relative'}}> <Image alt='Mountains' src='/mountains.jpg' layout='fill' objectFit='contain' /> </div><img src="/path/to/image.jpg" alt="" title="" />En SiguienteJS
<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>Aquí hay una manera: por ejemplo, quiero tener una imagen que cubra todo el ancho y alto de su contenedor, que es un div.
<div className={'image-container'}> <Image src={path} layout="fill" className={'image'} /> </div>Y aquí está el estilo: (Hay un contenedor div que ocupa la mitad del ancho y la altura de la ventana gráfica y mi imagen lo cubrirá).
// Nested Styling .image-container { width: 50vw; height: 50vh; position: relative; .image { width: 100%; height: 100%; position: relative !important; object-fit: cover; // Optional } } // Or Normal Styling .image-container { width: 50vw; height: 50vh; position: relative; } .image-container .image { width: 100%; height: 100%; position: relative !important; object-fit: cover; // Optional }