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
Tarry Quint
1,883 PointsCourse - How to make a Website
Question, I tried to add a picture in my gallery and it's much larger then the others. I cropped the photo exactly the same as the others, not sure why it wouldn't be the same. You can view my page here http://www.tquint.com.
Appreciate the help!
Tarry
4 Answers
Tom Bedford
15,645 PointsHi Tarry
It looks like the only styling on the images is max-width: 100%. The last image is portrait, compared to the others being landscape. It is therefore taller than the landscape images which is why it appears this way on the website.
The last image is 1755w × 2340h compared to the others at 2448w × 1836h.
Aside from the aspect ratio problem you are experiencing, you may want to create smaller versions of each image for the gallery page. These are very large images to load for a site. The small images in the gallery could then link to the full resolution shots.
Jeremy Stenseth
16,916 PointsThat image has a width of 768 and height of 1024. the rest of the images have a width of 1024 and height of 768. If you were to rotate the picture it would look the same but the orientation would be off. It's like to one image is in portrait and the others are in landscape.
Logan R
22,989 PointsInside the img tag, add a width and height.
<img src="img/table1.jpg" width="500px" height="500px" alt="">
or
<img src="img/table1.jpg" style="width: 500px; height: 500px" alt="">
You can also change it in the CSS.
img {
width: 500px;
height: 500px;
}
Hope this helps you out!
Edit: as to what Tom said, I would listen to him and make the sizes the same in your img tag. This helps it to load a lot faster and cut down on bandwidth.
Tarry Quint
1,883 PointsThanks guys! Appreciate the support, I see what happened!
It's now the same size!
Thank You!
Tarry
Tom Bedford
15,645 PointsGlad you got it fixed! I like the simple design of your site, looks great.
Jeremy Stenseth
16,916 PointsJeremy Stenseth
16,916 PointsThis explanation is much better than mine +1