Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Tarry Quint
Tarry Quint
1,883 Points

Course - 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
Tom Bedford
15,645 Points

Hi 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
Jeremy Stenseth
16,916 Points

This explanation is much better than mine +1

Jeremy Stenseth
Jeremy Stenseth
16,916 Points

That 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
Logan R
22,989 Points

Inside 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
Tarry Quint
1,883 Points

Thanks guys! Appreciate the support, I see what happened!

It's now the same size!

Thank You!
Tarry

Tom Bedford
Tom Bedford
15,645 Points

Glad you got it fixed! I like the simple design of your site, looks great.