Differences between min-height and height

A simple "min-" or "max-" value is a limit, but the element can be stretch or shrink based on other factors (like window size).

But a pure "width" or "height" is an exact value, and the element will be exactly that size no matter how big the window is.

For more details, see the related MDN pages (like min-width).

For simple "width" and "height" it is that you mentioned, it is the exact "width" or "height" of an element.(ex: div , img etc)

For min or max value you mean that we set the limit of an element. For instance if we set for an img element

img{ min-width:200px; min-height:200px; } The above mean that the img could not be less than 200px (in height and width)? Do we know the exact dimensions of the image if we dont set simple width and height but only min-height & min-width?

or if we set for the same img max-width & max-height as follows:

img{ max-height:200px; max-width:1200px; }

Suppose the above means that the image should not have height more than 200px and should not have width more than 1200px? Again, we have set the top limit dimensions of an image , but we dont know the exact dimensions of an image.

Thank You,

so the image has some specific diminesions when we place it into html document and just with min or max values we set minimim-maxium (height or wifth) should have .

What happens if we have set for an img:

img{ max-height:200px; max-width:500px; }

and after we shrinked a computer screen to half the dimension of the img decreased to half. That is height:100px: and width:250px;

or the image dimensons will not fall under 200px in height & 500px in width?

The same apliees for "min" - value. That is lower limit and if you have an image with default width:400px set min-width:200px then if you shrink the browser window then the image will not have lower width dimension than 200px? Have mentioned a video from browser page shrikage and expansion. https://photos.app.goo.gl/YBUe7vx5majf5Fpv9

Just to have better understanding what i mean,

When you mean to clip an image, it is to crop an image ?

If you dont set an image width:100% and have an image with min-width:200px and shrink the browser window then the image will not became lower from it's default width?

To make shrink an image what is the diffrence with croping and image? Little confuse the diffrences between these 2 terms.

Therefore, if you have an image with default width:500px; set for an image: img{ width:100%; max-width:500px; min-width:50px; }

then you make responsive the image?

if make smaller the browser window, then the image width will not fall under 50px?

: In other image example, if you have an image with default width:200px. And after apply the following css style to the image:

img{ width:200px; max-width:400px; min-width:100px; }

If you make smaller the browser window , then the image will never fall under 100px(width) and also when fully expand browser window then the image will have width:200px (as defined in width). The image may have more than 200px width in case you view the page in larger computer screens? (let say for 32 inch computer screens)