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
Paul Murphy
6,162 Pointsgrid.css
Hi, I have included the grid.css file that we have created from our CSS deep dive lessons into a new website project.
I'm having an issue, one of the first declarations in the CSS is img {width: 100%} Which is forcing the images to be 100% of the viewport rather than 100% of their actual size.
How do I get around this?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Paul,
I haven't been through this project but my guess is that this was done to have fluid images.
If you simply want your images to be their native size then the width should be set back to auto. If you're using your own css file after grid.css then you can put it in there and it will override the 100% setting.
Keep in mind though that if you have images in fluid containers you'll have to guard against your containers getting too small to contain the now fixed size images.
nnuxiragwh
10,345 PointsHi Paul,
I'm guessing that the img tag is placed in a div container with a fixed width and it is styled to take-up the whole width of the parent container.
Regards, T.
Paul Murphy
6,162 PointsHi Jason, thanks for the advice and pointing me in the right direction. Hopefully I'll be able to return the favor one day!
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsIt's not necessarily 100% of the viewport. It's 100% of their parent. If the parent element was only 500px wide but the viewport was 1000px wide the images would only be 500px wide.