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
arifbinyusuf
901 PointsWhy do my footer images behave this way?
Hi everybody, After watching Nick Pettit divide his gallery into two columns I decided to do the same thing but this time instead of giving my img element a max-width of 100%, I decided to give it a plane width of 100%. I realized that my gallery images were okay but my footer images(facebook and twitter images) had become so so big. But it came back to normal when I included the word max to the width. Can anybody explain to me why because that styling also applied to the gallery images but i didn't have problem with those. The original code used by Nick is as follows
html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First website</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>number one(1) image</p>
</a>
</li>
<li>
<a href="img.numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>number two(2) image</p>
</a>
</li>
<li>
<a href="img.numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>number two(6)image</p>
</a>
</li>
<li>
<a href="img.numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>number two(9) image</p>
</a>
</li>
<li>
<a href="img.numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>number two(12) image</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.facebook.com/et.net.3"><img src="img/facebook-wrap.png"></a>
<a href="http://www.twitter.com/cashtrap"><img src="img/twitter-wrap.png"></a>
<p>© 2014 Nick Pettit</p>
</footer>
</div>
</body>
</html>
CSS=
#wrapper {
max-width: 940px;
margin: 0 auto;
}
img {
max-width: 100%;
}
h1, h2 {
text-align: center;
}
nav {
text-align: center;
}
a {
text-decoration: none;
}
#gallery li {
width: 45%;
float: left;
margin: 2.5%;
}
Size of footer images however changed to be very big when I removed the word max from the width used to style the img element.
2 Answers
Andrew Rickards
18,877 Pointsimg { max-width: 100% } means all images can be no bigger than 100% the width of their parent container, but can be smaller than that. For example if you have an image that is 300px wide and you put it inside a div width a width of 600px, the image will still be 300px. If you make that div narrower (either with CSS or by making the screen narrower) to say 200px, the image will also shrink because it cannot be any wider than it's parent container, which is now 200px.
img { width: 100% }, on the other hand means all images will be exactly 100% the width of their parent container. So if you have a 300px wide image in a 600px wide div, the image will be stretched to 600px.
Conor Haining
2,193 PointsWhen using the width property on images, it will stretch that image to the full size of the parent container. Whereas the max-width property keeps the image to the maximum size of the image without stretching it.
arifbinyusuf
901 PointsThx man . That helped
arifbinyusuf
901 Pointsarifbinyusuf
901 PointsThx Andrew. I'm giving you a best answer tag for this.