Let's start talking about height and weight in addition to these two properties.
There's also mux width, which is able to assess and maximum with for a specific place in sight or document.
There's also the equivalent relative to height that is called Max Height, but this actually gets used
rarely inside our pages because a document gets developed much more often based on the width of the
page.
Talking about height, let's take into consideration the image inserted inside article that he's AMG
one dog, PMG, to which we attribute a class which we will call AMG one.
By doing so, we can move inside our stylesheet and retrieve the claws the way we have seen when we
were talking about the selectors.
Therefore, don't.
I am gwon open and close our race.
By switching to the preview.
We see that our image is inserted featuring a certain height and a certain ways, obviously from Aymond
one inserting height.
Then we can choose to define a specific height.
Therefore a hundred pixels, for example.
We can then say refresh and see that now the image adapts perfectly to that height and adjusts itself
for a perfect screen readability to be better displayed on screen.
However, if we define also a width, for example, two hundred pieces saving and refreshing, as you
see, the image gets squeezed because both the dimensions have been given.
Therefore, when you manage an image by using the CSF, remember to give just one between these two
properties to make only one the priority in the whole adapting process.
In the end, let's delete height that save.
Let's refresh and see that the image adapted to two hundred peaks and with.
In addition to the pixels here, you can also insert a percentage value if we chose, for example,
50 percent as width when saving and refreshing getting back to our screen, we would see that the image
positions itself occupy 50 percent of the screen.
If we shrunk our preview.
The image would adapt to the new weight, therefore to the new screen.
The same applies, of course, to the height.
So if I insert height.
Saving and refreshing.
The predefine hide.
Adapts to the image by updating the page dimensions, therefore the browser's dimensions.
In addition to being an image related property, we can also be a buddy related property, therefore
referring to the hold up, you may find surge in, for example, 500 pixels inside body saving and refreshing.
The whole page would shrink because we inserted a given width of five hundred pixels.
Also in this case, inserting perhaps 75 percent and refreshing.
We see that the page adapts to the new dimensions, these attributes in percentage are a first step
to the responsive design which can adapt to the screen which displays the content.
Of course, we will talk more in depth as we get on with the lessons, which will be focusing more and
more on this topic.
Moreover, in addition to weight and height, there is max width and max height, youthful attributes
to insert in maximum height and maximum width of the image rather than the container.
Therefore, the body, if I insert here instead of width 75 max width.
Seven hundred and fifty pixels, by saving and refreshing, you will see that in this moment, the wait
is said to seven hundred and fifty pixels.
Yet if I shrink, as you can see, when the width will be lower than 750 pixels, the screen will have
to update.
This is why at the beginning of the lesson, I underlined the fact that mux with is much more use than
mux height because the height in managing the HDMI document does not have a maximum value.
But it's nearly always standard through pixels or a given percentage.
Obviously we can do the same thing also on the image by inserting Macs with 50 percent, let's say refresh.
And as you see, also in this case, if I shrink the image, it gets smaller.
If I widen it, it gets up to 50 and it stops that way.
Therefore, these space attributes are fundamental to correctly manage the dimensions of our document.
And also, it's really important to associate them with other specific properties, enabling to use
in depth the responsive design.
OK, then for the moment, we'd better stop here and let's step onto the next space property.