Difference between "max-width:100%'' and "width: 100%''

In the calss, max-width is used to scale proportionally:

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
.container img {
  max-width: 100%;
  height: auto;
  display: block;

Can we just use “width: 100%” here, what is the difference?
Thank you

I understand the difference between these two circumstances:

This <div> element has a width of 500px, and margin set to auto.

This <div> element has a max-width of 500px, and margin set to auto.

But if this ‘500px’ become percentage, eg. 100%? It seems they would be the same because the width will always change with the parent.

This applies more to when you change the size of windows in your browser. If you want to be really clear as to what’s happening, I suggest coloring your classes with different background colors and seeing how they get shape differently when you re-size.

1 Like