How to Use fill Prop in Next.js Image Component

In Next.js, use the fill prop on the Image component to make the image fill its parent container completely. This requires the parent to have position: relative and a set size, so the image can stretch responsively inside it.

Syntax

The fill prop is a boolean attribute on the Next.js Image component. When set, it makes the image fill the entire space of its parent container.

Key points:

• fill: Enables the image to fill the parent container.
• Parent container must have position: relative and defined width and height.
• The image will use object-fit: cover by default to maintain aspect ratio.

jsx

import Image from 'next/image';

export default function Example() {
  return (
    <div style={{ position: 'relative', width: '300px', height: '200px' }}>
      <Image
        src="/example.jpg"
        alt="Example"
        fill
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}

Output

A 300x200 pixel container with the image filling it completely, cropped if needed to cover the area.

Example

This example shows how to use the fill prop to make an image fill a box of fixed size. The image will scale and crop to cover the container.

jsx

import Image from 'next/image';

export default function FillImageExample() {
  return (
    <div style={{ position: 'relative', width: '400px', height: '250px', border: '2px solid #333' }}>
      <Image
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb"
        alt="Mountain"
        fill
        style={{ objectFit: 'cover' }}
        priority
      />
    </div>
  );
}

Output

A 400x250 pixel bordered box showing a mountain image filling the entire box, cropped to cover.

Common Pitfalls

Common mistakes when using fill prop:

• Not setting position: relative on the parent container, causing the image not to fill properly.
• Parent container missing explicit width and height, so the image has no size to fill.
• Forgetting to set objectFit style, which controls how the image scales inside the container.

Example of wrong and right usage:

jsx

// Wrong usage: no position or size on parent
import Image from 'next/image';

export default function WrongFill() {
  return (
    <div>
      <Image src="/example.jpg" alt="Wrong" fill />
    </div>
  );
}

// Right usage: position relative and size set
export default function RightFill() {
  return (
    <div style={{ position: 'relative', width: '300px', height: '200px' }}>
      <Image src="/example.jpg" alt="Right" fill style={{ objectFit: 'cover' }} />
    </div>
  );
}

Output

WrongFill: Image does not appear or fills incorrectly.
RightFill: Image fills 300x200 container properly.

Quick Reference

Prop/Requirement	Description
fill	Boolean prop to make image fill parent container
Parent container style	Must have position: relative and set width & height
style={{ objectFit: 'cover' }}	Recommended to control image scaling and cropping
alt	Always provide for accessibility
priority	Optional, to preload important images

Key Takeaways

Use the fill prop on Next.js Image to make it fill its parent container.

Always set position: relative and explicit size on the parent container.

Use objectFit style to control how the image scales inside the container.

Without proper parent styles, fill will not work as expected.

Provide alt text for accessibility and priority for important images.