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" .
<Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>funcionó para mí, suponiendo que desea que la imagen se ajuste al contenedor principal.
NO use layout='fill', realmente solo hace que la imagen se ajuste a toda la pantalla por alguna razón.
En caso de que no quiera usar valores absolutos para el alto y el ancho, es decir, en px, etc., puede hacer algo como esto
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} > <Image alt="Image Alt" src="/image.jpg" layout="fill" objectFit="contain" // Scale your image down to fit into the container /> </div>Fuente original https://stackoverflow.com/a/66358533/12242764
Si alguien usa NextJS con componentes con estilo. Funciona:
const Container = styled.div` width: 100%; div, span { position: unset !important; } .image { object-fit: contain; width: 100% !important; position: relative !important; height: unset !important; } `; <Container> <Image src={ src } layout="fill" className={ "image" } /> </Container>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 }<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"/>Creo que también proporciono un atributo de ajuste de objeto en el elemento Imagen como este: -
<Image alt="Mountains" src="/mountains.jpg" layout="fill" objectFit="cover" />El ejemplo proporcionado por Nextjs puede ser https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
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>