So why do images that are loaded
with help of the next/image and that fill prop
take up the entire available screen space?
Well, because the fill prop essentially tells NextJS
that we don't know the exact size of the loaded image,
and that if they offer, should fill up
all the space it can get, and by default,
if you don't have any other settings, so to say,
that will be the entire screen space.
Now, that's, of course, not what we want,
and therefore, what you should do
when you're using the next/image with the fill prop
is you should go to the container element of that image,
or add such a container element if you don't have one,
and change the CSS style settings on that container.
So in my case, I need to change the CSS styles of that div
that has the class name post-image.
Now, I can do that here in my project
in the app folder in the globals.css file.
There, if you scroll down, at some point,
you'll find this post and post-image styling here,
and I'll add a new rule here where I target the element
with the class post-image.
And what you should do when using this fill prop
is you should set the parent container, so the container
in which you're using the next/image component,
to have a position of relative,
because this fill prop here will, in the end,
set the position of the image element
that's rendered to absolute,
and that, in turn, will then position the element
in the closest parent container
that has a position of relative, or some other position,
but relative is the common choice here.
Now if you do that, you'll therefore see
that now there are no images at all,
and the reason for that is that when using that fill prop,
NextJS will position the image
according to the container element's position element,
and it will take up all the width and height
determined by the container.
So what you must do in such a case here
is set a width and height on the container element.
So here, I was setting width and height with CSS
on the image element itself.
That should now instead move to the container element.
And with that done, you see the images are now loaded again,
and they are displayed properly again,
but now they're also optimized by NextJS as well
as far as NextJS can optimize them,
and I'll get back to that in a second.
But you see that, for example,
this lazy loading property is again added,
and you see that the source set is set,
so that can be useful, but that's not all I wanna do here.
Indeed.