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
Carlos David Salgado Tabares
6,868 Points"max-width" instead of "width" CSS property using images.
Why Nick uses "max-width" instead of "width" CSS property when he sets up the width of the portfolio and profile images? Is there any difference?
Thank you.
3 Answers
Luis Vazquez
6,370 PointsHe's using 100% is for a scalable layout.
Here's the difference when it comes images.
If you use "width: 100%" and the parent element (most likely a div) has no max-width, the image will stretch to the size of the screen (it'll be out of resolution if you have an image with small dimensions).
However, if you use "max-width: 100%", the image will keep it's max dimensions (it won't become any bigger than the original size of the image).
You can copy and paste the code below as an example. Just insure that you have 2 images: one named image1.jpg and the other named image2.jpg. You can use the same image and just copy and rename so that you know they have the same dimensions.
Also, the style is embedded within the html to make it easier for testing. Let me know if you have any questions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- setting css style here instead of css file -->
<style type="text/css">
.test-img-1 img{
max-width: 100%;
}
.test-img-2 img{
width: 100%;
}
</style>
</head>
<body>
<div class="test-img-1">
<img src="image1.jpg" />
</div>
<div class="test-img-2">
<img src="image2.jpg" />
</div>
</body>
</html>
Carlos David Salgado Tabares
6,868 PointsThank you very much.
I opened your example code in a web browser and now I understand the difference.
Luis Vazquez
6,370 PointsNo problem Carlos! Feel free to connect with me on Twitter or LinkedIn. You can find my contact info on my treehouse profile or at http://luisbox.com/
Have a great week!
-Luis
Carlos David Salgado Tabares
6,868 PointsThank you Nick and Luis for your answers.
But in this case Nick uses max-width CSS property with a 100% value, he does not use a pixel value.
What is the difference between "max-width: 100%:" and "width: 100%;". I tried both and I can't see any difference.
Luis Vazquez
6,370 PointsHi Carlos - I'll try to explain in the context of responsive design.
Max-Width - Using "max-width" ensures that an element doesn't stretch beyond a specific width. This is especially handy when designing responsive elements (such as images). You simply need to assign the max-width once for all media queries in most scenarios.
Width - Using "width" alone in responsive design does not put any restrictions on how large the element can be. Going this route when using responsive images will make you have to specify "width" in every media query (that's no fun).
Hope that makes sense.
-Luis
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsHey Luis Vazquez , I just read your above article on difference between using max-width and width property and I understood them completely. I just have one more doubt . When i run my code without mentioning any "max-width" of my image then it got larger in size while when i mention max-width : 100% , it gets smaller , i mean right size. Why it happens?
Nick Ocampo
15,661 PointsNick Ocampo
15,661 PointsSay an image is originally 100px wide. If you specify a width of 200px, that image will stretch. max-width, will let it display at 100px (or whatever the size of your element is as long as it's less than the max-width).
This gives you more control over your layouts because it lets you make sure things don't get too large as to break the layout without interfering with the sizes if not needed.