What is the Difference between width 100% and max width 100% on image element in css

1

When width is 100% on image element,image is occupying full screen space on resizing.When max-width
is set to 100% on image element,image is not occupying full screen space.Why there is difference in
o/p
Note:image element is not inside any other element.It is just placed inside body tags

img { max-width: 100%;

}

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

Cinque Terre
2

Link
This Link will be helpful

3

Max as in maximum. So max-width means the maximum width it can be is 100%. So if an image is 500px wide, and the screen is 1000px then the image will be 500px wide. But if the screen is 400px, then the image will be 400px as well, as the maximum width it can be is 100%

4

If the element’s width is greater that the max-width you declared then the max-witdth will prevail. But if the element’s width is less than the declared max-width property then the element assumes its normal width.

You could try this out:
Set the width property of the element then in a media query set a max-width property…

For example, width: 100%; and in a media query, say max-width: 500px; something like that then you will understand it better.
This might be helpful

5

hi…my doubt here is when 100% width is set on img element…on resizing the screen it is occupying screen space…when we use max-width as 100% ,on resizing the screen it is not occupying entire screen space though it is not inside any element.Can you help me here…below is my code

img { width: 100%; }

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

Cinque Terre
6

hi…my doubt here is when 100% width is set on img element…on resizing the screen it is occupying screen space…when we use max-width as 100% ,on resizing the screen it is not occupying entire screen space though it is not inside any element.Can you help me here…below is my code

img { width: 100%; }

Responsive Images

Cinque Terre
8

That is what i am trying to explain. When you declared, width: 100%, you disregarded the original width of the img and instead made it 100 % of its container-- you could check the img size property if you have it locally on your computer.

So, when u declared it max-width: 100%, the img original width might not be as big as the container, the body in this case.

A more detailed explanation:
Say your img original size is 300px and the body width is 500px. Width: 100% will make the img equal to 500px, disregarding the img original width. On the other hand if you say max-width: 100%. The img will jus be it’s original since it’s not more than 500px, originally. Assuming the img width is, for example, 800px , then max-width will take into effect.

Hope that helps. Tried to explain in English as much as i could.

9

Got it !thanks samolex for the calrification

1 Like