nextjs-light.png

Next/Image Doesn't Fill Parent Div!

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 (3 days ago) in


View Related Posts

6 months ago

google-analytics.png

Add Google Analytics To Next.js Website

4 months ago

splitbee.png

Add Splitbee Analytics To Next.js

1 month ago

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

3 days ago

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

6 months ago

nextjs-light.png

Next.js + MDX Pages Quickstart

3 months ago

react.png

useEffect() Hook in Next.JS - React Hooks

Was this snippet helpful?


Written By Benjamin Carlson

Founder coffeeclass.io

More Articles By Benjamin Carlson


Legal

Terms

Disclaimer

Privacy Policy

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

Powered by

Vercel Logo