Img tag and it' 3 thumb-rule AND relative path explanation

1) img tag and it's attribute

alt is used incase our image doesn't load in the browser, it will serve as the description of the image.a

2) Thumb-rule of img tag:

a) We should never stretch an image beyond it's original dimension, be it height or width.

b) We should never go against the aspect ratio of the original image. Aspect ratio is the ratio width: height. for example lets say the image has 1000px and 700px height, so the aspect ratio is 10:7, to maintain the aspect ratio we can give 200px width : 140px height as the ratio is still 10:7, but we cannot provide width as 400px : 80 px height as the aspect ratio will be 5:1, which is the violation of aspect ratio because this does not maintain the 10:7 ratio. Therefore we should only specific one of the dimension either height or width ( preferably width), the other dimension will scale accordingly to the aspect ratio

c) we should never specify absolute width/height to an image, rather we should have a container (ex- div), Specific a width to that container and make the image follow that width of the container using max-width property.

3) How to use max-width property in CSS:

4) How to give src of an image from relative path: (Relative to the HTML file)

In the first picture we are giving src to an image from absolute path i.e., directly copying the link from the browser and pasting it in the src, but if we have saved the image in our computer and in a different folder inside the main folder ( eg. HTML module is our main folder and there's index.html in it , now if we create separate image folder in the HTML folder and save our image there, that is called relative path) ,

we can give a relative path with the syntax :- ./image/ natue/ url . Here ./image is the folder name, nature is the file name where we have saved our image and url is the actual name of the image: