1 00:00:06,520 --> 00:00:13,460 Let's start talking about height and weight in addition to these two properties. 2 00:00:13,810 --> 00:00:22,750 There's also mux width, which is able to assess and maximum with for a specific place in sight or document. 3 00:00:23,870 --> 00:00:31,550 There's also the equivalent relative to height that is called Max Height, but this actually gets used 4 00:00:31,550 --> 00:00:40,730 rarely inside our pages because a document gets developed much more often based on the width of the 5 00:00:40,730 --> 00:00:41,330 page. 6 00:00:42,360 --> 00:00:51,300 Talking about height, let's take into consideration the image inserted inside article that he's AMG 7 00:00:51,300 --> 00:00:59,210 one dog, PMG, to which we attribute a class which we will call AMG one. 8 00:00:59,820 --> 00:01:07,180 By doing so, we can move inside our stylesheet and retrieve the claws the way we have seen when we 9 00:01:07,180 --> 00:01:09,150 were talking about the selectors. 10 00:01:09,150 --> 00:01:10,730 Therefore, don't. 11 00:01:10,800 --> 00:01:14,700 I am gwon open and close our race. 12 00:01:14,850 --> 00:01:16,590 By switching to the preview. 13 00:01:16,710 --> 00:01:25,710 We see that our image is inserted featuring a certain height and a certain ways, obviously from Aymond 14 00:01:25,710 --> 00:01:28,350 one inserting height. 15 00:01:29,040 --> 00:01:32,940 Then we can choose to define a specific height. 16 00:01:33,180 --> 00:01:36,420 Therefore a hundred pixels, for example. 17 00:01:36,570 --> 00:01:45,630 We can then say refresh and see that now the image adapts perfectly to that height and adjusts itself 18 00:01:45,960 --> 00:01:51,210 for a perfect screen readability to be better displayed on screen. 19 00:01:51,570 --> 00:02:00,510 However, if we define also a width, for example, two hundred pieces saving and refreshing, as you 20 00:02:00,510 --> 00:02:07,300 see, the image gets squeezed because both the dimensions have been given. 21 00:02:07,830 --> 00:02:16,980 Therefore, when you manage an image by using the CSF, remember to give just one between these two 22 00:02:16,980 --> 00:02:23,430 properties to make only one the priority in the whole adapting process. 23 00:02:23,430 --> 00:02:27,710 In the end, let's delete height that save. 24 00:02:27,990 --> 00:02:34,020 Let's refresh and see that the image adapted to two hundred peaks and with. 25 00:02:36,920 --> 00:02:44,840 In addition to the pixels here, you can also insert a percentage value if we chose, for example, 26 00:02:44,840 --> 00:02:53,390 50 percent as width when saving and refreshing getting back to our screen, we would see that the image 27 00:02:53,390 --> 00:02:58,370 positions itself occupy 50 percent of the screen. 28 00:02:59,310 --> 00:03:01,830 If we shrunk our preview. 29 00:03:04,040 --> 00:03:09,510 The image would adapt to the new weight, therefore to the new screen. 30 00:03:10,400 --> 00:03:13,350 The same applies, of course, to the height. 31 00:03:13,880 --> 00:03:16,370 So if I insert height. 32 00:03:17,310 --> 00:03:18,870 Saving and refreshing. 33 00:03:20,490 --> 00:03:22,140 The predefine hide. 34 00:03:24,060 --> 00:03:31,980 Adapts to the image by updating the page dimensions, therefore the browser's dimensions. 35 00:03:33,530 --> 00:03:41,510 In addition to being an image related property, we can also be a buddy related property, therefore 36 00:03:41,510 --> 00:03:50,060 referring to the hold up, you may find surge in, for example, 500 pixels inside body saving and refreshing. 37 00:03:50,240 --> 00:03:57,230 The whole page would shrink because we inserted a given width of five hundred pixels. 38 00:03:57,590 --> 00:04:04,010 Also in this case, inserting perhaps 75 percent and refreshing. 39 00:04:06,160 --> 00:04:14,500 We see that the page adapts to the new dimensions, these attributes in percentage are a first step 40 00:04:14,680 --> 00:04:22,330 to the responsive design which can adapt to the screen which displays the content. 41 00:04:23,170 --> 00:04:30,700 Of course, we will talk more in depth as we get on with the lessons, which will be focusing more and 42 00:04:30,700 --> 00:04:32,320 more on this topic. 43 00:04:34,510 --> 00:04:43,630 Moreover, in addition to weight and height, there is max width and max height, youthful attributes 44 00:04:43,630 --> 00:04:51,130 to insert in maximum height and maximum width of the image rather than the container. 45 00:04:51,160 --> 00:04:58,540 Therefore, the body, if I insert here instead of width 75 max width. 46 00:04:59,750 --> 00:05:07,970 Seven hundred and fifty pixels, by saving and refreshing, you will see that in this moment, the wait 47 00:05:08,120 --> 00:05:11,500 is said to seven hundred and fifty pixels. 48 00:05:12,080 --> 00:05:22,610 Yet if I shrink, as you can see, when the width will be lower than 750 pixels, the screen will have 49 00:05:22,610 --> 00:05:23,340 to update. 50 00:05:23,780 --> 00:05:31,100 This is why at the beginning of the lesson, I underlined the fact that mux with is much more use than 51 00:05:31,100 --> 00:05:39,140 mux height because the height in managing the HDMI document does not have a maximum value. 52 00:05:39,140 --> 00:05:45,340 But it's nearly always standard through pixels or a given percentage. 53 00:05:46,040 --> 00:05:58,700 Obviously we can do the same thing also on the image by inserting Macs with 50 percent, let's say refresh. 54 00:06:00,200 --> 00:06:06,510 And as you see, also in this case, if I shrink the image, it gets smaller. 55 00:06:06,830 --> 00:06:12,250 If I widen it, it gets up to 50 and it stops that way. 56 00:06:12,620 --> 00:06:19,980 Therefore, these space attributes are fundamental to correctly manage the dimensions of our document. 57 00:06:20,000 --> 00:06:30,050 And also, it's really important to associate them with other specific properties, enabling to use 58 00:06:30,050 --> 00:06:32,960 in depth the responsive design. 59 00:06:33,830 --> 00:06:40,250 OK, then for the moment, we'd better stop here and let's step onto the next space property.