Next/Image Doesn't Fill Parent Div!

Next/Image Doesn't Fill Parent Div!

2 min read · 329 words · Shared November 1, 2021 by

Article Summary: Spoiler, the answer is position: relative

Introduction

If you have worked with Next.js, you have without a doubt come across the next/image component. Introduced in v10.0.0, next/image is an imporovement over the humble <img /> HTML tag.

Features of next/image include:

  • Image lazy loading
  • A custom loader
  • Quality control
  • Placeholder image
  • and more!

The NextImage component makes the lives of the website visiter much better, however, at times it can be hard to work with and make the lives of the developer harder!

next/image Not Filling Parent Div

One of the most common issues with next/image is that it doesn't fill the parent div. Let's take a look at the following example:

import NextImage from 'next/image'

<div height="500px" width="500px">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>

Note: The code above is "pseudo code". It will not run. height and width cannot be declared on div like I did in the example above.

If I aked you what would happen, you would probably say that the image would render with a height of 500px and a width of 500px. However, this is not the case! The image will have the height and width of itself! If the raw image is 230px by 570px, those will be the dimensions.

The Solution

I have seen this question asked many times on sites like stackoverflow. Some of the answers aren't even helpful!

The simple solution is to add position: relative to the parent div!

import NextImage from 'next/image'

<div height="500px" width="500px" position="relative">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>

Now, the image will take up the width of the parent div!

Explanation

So why does this work? The default position of a html div tag is static.

Because of this, the image will not fill the parent div.

Published on November 01, 2021 (November 1, 2021)

Related Tags

    #nextjs

Related Posts

Next.js Progressive Web App · 20 days ago
useState() Hook in Next.JS - React Hooks · 24 days ago
Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Generate A Dynamic Sitemap In Next.js Website · September 27, 2021
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks · September 26, 2021

Email Newsletter

On This Page

Introduction

next/image Not Filling Parent Div

The Solution

Explanation

View Related Posts

20 days ago

nextjs-light.png

Next.js Progressive Web App

24 days ago

react.png

useState() Hook in Next.JS - React Hooks

December 17, 2021

algolia.png

Add Algolia's InstantSearch to Next.js - A Quickstart

September 27, 2021

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 9, 2021

react.png

useEffect() Hook in Next.JS - React Hooks

July 20, 2021

splitbee.png

Add Splitbee Analytics To Next.js

July 10, 2021

nextjs-light.png

Next.js Crash Course

May 10, 2021

nextjs-light.png

Next.js + MDX Pages Quickstart

April 29, 2021

google-analytics.png

Add Google Analytics To Next.js Website

April 15, 2021

firebase.png

Connect Firebase To Next.js


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.