Cómo configurar el componente siguiente/imagen al 100 % de altura

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 documentosestas propiedades son no requerido cuando se usa layout="fill".

Esto es lo que funcionó para mí.

con next/image:

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt="Mountains"
    src="https://stackoverflow.com/mountains.jpg"
    layout="fill"
    objectFit="contain"
  />
</div>

y con next/future/image:

<Image
    fill
    alt="Mountains"
    src="https://stackoverflow.com/mountains.jpg"
    sizes="100vw"/>

siguiente/futuro/imagen

<img src="/path/to/image.jpg" alt="" title="" />

En NextJS 12 y versiones anteriores

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

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

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

<img alt="" src="https://some/image/uri" loading="lazy" />

En SiguienteJS

<div>
  <Image
    alt=""
    src="https://some/image/uri"
    width="100%"
    height="100%"
    layout="fill"
    objectFit="contain"
  />
</div>

Funciona para mí en el componente de imagen next.js

<Image src="/path/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="cover"/>