Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Posted by karson Adam
karson Adam
32,623 Points

whats is difference between of width and max-width ?

whats is difference between of width and max-width wen applied to img element?

5 Answers

Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points
Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

Hey There! The difference is following. width keeps the size of the object stable. Lets say you put width: 700px for an image. When you re-size you screen the image stays stably 700px. Lets say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images doesn't fit in the screen it will automatically re-size it to fit the screen.

Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Hey Aleksandr Vinogradov! Could you please explain, whats is difference between the width and max-width WHEN using relative units (%)?

width: 100%; 

/* vs */

max-widht: 100%;

With width:100% the object will also resize itself according to the parent element size... what will change if we use max-width:100% instead?

Selvakumar Soundararajan
Selvakumar Soundararajan
11,541 Points

Superb explanation :)

Ninh Nguyen
Ninh Nguyen
1,736 Points
Ninh Nguyen
Ninh Nguyen
1,736 Points

The difference between width: 100% and max-width:100% is that: 

 First, width define the width of specific element while max-width define the maximum size the element is allow to have.

 Second, width:100% use the parent's width to calculate current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Jonathan Söder
Jonathan Söder
7,428 Points
Jonathan Söder
Jonathan Söder
7,428 Points

width basically assigns a definite value to an element like: this element is 80% wide, no more no less.

With max-width it basically says: listen, this element's width CANNOT be more than 80%. BUT it can be smaller.

Christopher Andrew Kemur
Christopher Andrew Kemur
7,709 Points
Christopher Andrew Kemur
Christopher Andrew Kemur
7,709 Points

if you use max-width, and the layout is responsive, no matter how big the screen size. The width will be maximized only as the width you declared on the max-width.

Sina Maleki
Sina Maleki
6,135 Points
Sina Maleki
Sina Maleki
6,135 Points

Hi everyone I know these answers are for many months ago but there's no difference when I set the image max-width to 100% and width:100%. because both of them are good work when I resize the browser width. as Jonathan Söder says if the width or max-width set to some value like 80% or any value less than 100%, it makes difference between width and max-width, but I didn't see any differences when I set both of them to 100%. if I wrong please notice me. Best.