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

Question

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

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

<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

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

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

<Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>

worked for me, assuming you want image to fit into the Parent container.

Do NOT use layout='fill' it really just makes the image fit the Whole Screen for some reason.

View more solutions

Comments

[Asad S]

Yup, the parent of Image must have relative properties.

[GRosay]

That is one of the best solution I've found for distant image. For local images, it's way more easier, but for dynamically loaded images this solution is working like a charm.

[Hussam Khatib]

you are setting the absolute values for height and width , but the question states in percentage

[anolan23]

if using 'fill' you need to have the parent positioned to 'relative'

[Piltsen]

I just would like to add something to this answer, In my case, where I needed the image to be aligned to the left, you can add the attribute objectPosition="left"; It is passed to css object-position: "left"; More info - developer.mozilla.org/en-US/docs/Web/CSS/object-position