If you have worked with Next.js, you have without a doubt come across the
next/image component. Introduced in
next/image is an imporovement over the humble
<img /> HTML tag.
- Image lazy loading
- A custom loader
- Quality control
- Placeholder image
- and more!
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.
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.
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!
So why does this work? The default position of a html div tag is
You can even check for yourself and check in Chrome by doing: Click On the Element --> Computed --> Filter --> Show All. Thanks SO
Because of this, the image will not fill the parent div.