'How to set the next/image component to 100% height

I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.

I have tried the following:

<Image
    src="/deco.svg"
    alt=""
    layout="fill"
/>

This snippet compiles successfully, but on the frontend, I see the following error:

Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.

This confuses me because according to the docs, these properties are not required when using layout="fill".

Solution 1:^[1]

This is what worked for me:

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

Solution 2:^[2]

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

In NextJS

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

Solution 3:^[3]

Here is a way: For example I want to have an image that covers the whole width & height of its container which is a div.

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

And here is the style: (There is a container div that occupies half width & height of viewport & my image will cover it.)

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

Solution 4:^[4]

I think also provide object-fit attribute on the Image element like this:-

<Image
    alt="Mountains"
    src="/mountains.jpg"
    layout="fill"
    objectFit="cover"
  />

Example provided by Nextjs can be https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js

Solution 5:^[5]

In case you dont want to use absolute values for height and width , that is in px etc , you can do something like this

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

Original source https://stackoverflow.com/a/66358533/12242764

Solution 6:^[6]

If someone use NextJS with styled components. It works:

 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3
Solution 4	Sonu Nigam
Solution 5	Hussam Khatib
Solution 6	benson23

'How to set the next/image component to 100% height

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]