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

The symptom usually looks like one of these:

• you expect the image to fill the card height, but it collapses
• you still see width and height complaints from older examples
• the image overflows because the parent never had a real height

The root cause is simple: next/image with fill does not invent a layout box. It fills the parent's box, so the parent must be positioned and sized first.

The fix#

Use a wrapper with a real height, then let the image fill it.

import Image from 'next/image'

export default function HeroCard() {
  return (
    <div
      style={{
        position: 'relative',
        height: '320px',
        width: '100%',
      }}
    >
      <Image
        src="/deco.svg"
        alt=""
        fill
        style={{ objectFit: 'contain' }}
        sizes="100vw"
      />
    </div>
  )
}

That is the important mental model:

• fill sizes the image to the parent
• the parent needs position: relative or display: block
• the parent needs an explicit height, min-height, or aspect-ratio-driven size

Why older answers feel broken now#

A lot of older answers use layout="fill". Current Next.js docs document the fill prop instead.

If you are reading an older answer, translate this:

<Image layout="fill" ... />

to this:

<Image fill ... />

If you want "full height, natural width"#

That is usually really a CSS question, not a Next.js question.

If the image should keep its aspect ratio inside a fixed-height container, use objectFit: 'contain':

<div
  style={{
    position: 'relative',
    height: '240px',
    width: '100%',
  }}
>
  <Image
    src="/product.png"
    alt="Product"
    fill
    style={{ objectFit: 'contain' }}
  />
</div>

If it should crop to fill the whole area, use objectFit: 'cover' instead.

The parent is the real bug#

This is the broken pattern:

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

That wrapper has no positioning context and no guaranteed height, so the image has nothing meaningful to fill.

This is the corrected pattern:

<div style={{ position: 'relative', minHeight: 240 }}>
  <Image src="/deco.svg" alt="" fill style={{ objectFit: 'contain' }} />
</div>

When to use width and height instead#

If you know the intrinsic dimensions and the image is not supposed to act like a background, width and height are still the simplest choice:

<Image
  src="/logo.png"
  alt="Logo"
  width={240}
  height={80}
/>

Use fill only when the design is "fit this image into the parent box."

The performance angle#

Once the image actually has a stable box, Core Web Vitals also get easier to control. That is the real win. Most layout shift bugs around next/image are not image bugs at all; they are missing layout constraints around the image.

If you are cleaning up image performance next, these are the right follow-ons:

• I Tanked My Core Web Vitals Score With Next.js Images
• Fix "lcp" not working in production
• How to implement LCP end to end
• Next.js Performance Optimization for Indie Developers

References#

• Stack Overflow: How to set the next/image component to 100% height
• Next.js docs: Image component