1
00:00:00,000 --> 00:00:03,000
So why do images that are loaded

2
00:00:03,000 --> 00:00:06,000
with help of the next/image and that fill prop

3
00:00:06,000 --> 00:00:09,000
take up the entire available screen space?

4
00:00:09,000 --> 00:00:13,000
Well, because the fill prop essentially tells NextJS

5
00:00:13,000 --> 00:00:16,000
that we don't know the exact size of the loaded image,

6
00:00:16,000 --> 00:00:19,000
and that if they offer, should fill up

7
00:00:19,000 --> 00:00:23,000
all the space it can get, and by default,

8
00:00:23,000 --> 00:00:27,000
if you don't have any other settings, so to say,

9
00:00:27,000 --> 00:00:30,000
that will be the entire screen space.

10
00:00:30,000 --> 00:00:32,000
Now, that's, of course, not what we want,

11
00:00:32,000 --> 00:00:34,000
and therefore, what you should do

12
00:00:34,000 --> 00:00:37,000
when you're using the next/image with the fill prop

13
00:00:37,000 --> 00:00:41,000
is you should go to the container element of that image,

14
00:00:41,000 --> 00:00:45,000
or add such a container element if you don't have one,

15
00:00:45,000 --> 00:00:50,000
and change the CSS style settings on that container.

16
00:00:50,000 --> 00:00:54,000
So in my case, I need to change the CSS styles of that div

17
00:00:54,000 --> 00:00:56,000
that has the class name post-image.

18
00:00:57,000 --> 00:01:00,000
Now, I can do that here in my project

19
00:01:00,000 --> 00:01:04,000
in the app folder in the globals.css file.

20
00:01:04,000 --> 00:01:06,000
There, if you scroll down, at some point,

21
00:01:06,000 --> 00:01:11,000
you'll find this post and post-image styling here,

22
00:01:13,000 --> 00:01:16,000
and I'll add a new rule here where I target the element

23
00:01:16,000 --> 00:01:17,000
with the class post-image.

24
00:01:18,000 --> 00:01:23,000
And what you should do when using this fill prop

25
00:01:23,000 --> 00:01:28,000
is you should set the parent container, so the container

26
00:01:28,000 --> 00:01:31,000
in which you're using the next/image component,

27
00:01:31,000 --> 00:01:35,000
to have a position of relative,

28
00:01:37,000 --> 00:01:39,000
because this fill prop here will, in the end,

29
00:01:39,000 --> 00:01:42,000
set the position of the image element

30
00:01:42,000 --> 00:01:44,000
that's rendered to absolute,

31
00:01:44,000 --> 00:01:46,000
and that, in turn, will then position the element

32
00:01:46,000 --> 00:01:48,000
in the closest parent container

33
00:01:48,000 --> 00:01:52,000
that has a position of relative, or some other position,

34
00:01:52,000 --> 00:01:54,000
but relative is the common choice here.

35
00:01:55,000 --> 00:01:56,000
Now if you do that, you'll therefore see

36
00:01:56,000 --> 00:02:00,000
that now there are no images at all,

37
00:02:00,000 --> 00:02:02,000
and the reason for that is that when using that fill prop,

38
00:02:02,000 --> 00:02:06,000
NextJS will position the image

39
00:02:06,000 --> 00:02:10,000
according to the container element's position element,

40
00:02:10,000 --> 00:02:12,000
and it will take up all the width and height

41
00:02:12,000 --> 00:02:15,000
determined by the container.

42
00:02:15,000 --> 00:02:17,000
So what you must do in such a case here

43
00:02:17,000 --> 00:02:22,000
is set a width and height on the container element.

44
00:02:22,000 --> 00:02:26,000
So here, I was setting width and height with CSS

45
00:02:26,000 --> 00:02:27,000
on the image element itself.

46
00:02:27,000 --> 00:02:30,000
That should now instead move to the container element.

47
00:02:32,000 --> 00:02:35,000
And with that done, you see the images are now loaded again,

48
00:02:35,000 --> 00:02:38,000
and they are displayed properly again,

49
00:02:39,000 --> 00:02:43,000
but now they're also optimized by NextJS as well

50
00:02:43,000 --> 00:02:46,000
as far as NextJS can optimize them,

51
00:02:46,000 --> 00:02:49,000
and I'll get back to that in a second.

52
00:02:49,000 --> 00:02:50,000
But you see that, for example,

53
00:02:50,000 --> 00:02:53,000
this lazy loading property is again added,

54
00:02:53,000 --> 00:02:55,000
and you see that the source set is set,

55
00:02:55,000 --> 00:03:00,000
so that can be useful, but that's not all I wanna do here.

56
00:03:00,000 --> 00:03:01,000
Indeed.