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

CSS

Posted by Brian Galassini
Brian Galassini
3,521 Points

Changing how photos are displayed in CSS.

I finished the "how to make a website" section and it looks great if you use the images provided for the gallery. I chose to use my own images to play around with it and learn. Since a few of them are different in size, some of them show as a more square shape while the different sized ones are tall rectangles. It makes the gallery look ugly. I'm trying to find a way to hide, cut off, contain the images so that they are all equal in the gallery section so it looks more uniform. I have tried messing around with clip, max-height: %. I tried making the image position absolute, but it overlaps everything and looks even worse.

I don't know. Maybe it's beyond HTML and CSS. I just want to know if that's the case. Thank you in advance.

B Green
B Green
13,636 Points

Do you have a Jsfiddle or Codepen you could share? It would make it easier for others to help :)

2 Answers

Chase Swanson
Chase Swanson
Courses Plus Student 8,886 Points

Britain,

At the end of the day you will likely need to edit your photos in some type of image editor like Photoshop or Pixlr. There are some free ones like Pixlr that you can search.

Now that most cameras take images in widescreen you will always deal with this issue just by simply taking one photo in landscape and another in portrait.

CSS can create the "container" but it is difficult to get photos taken with different settings to all look uniform.

To get them to all look uniform on a site, you need to get them all to essentially the same size or aspect ration at the start.

Hope that helps a little.

Brian Galassini
Brian Galassini
3,521 Points

It's actually me that asked the question. Your answer was most helpful. It explains a lot seeing as the pictures I used are 6-7 years old. Honestly that is the easiest way to fix it; using a photo editor. I appreciate your responses guys.

Britain Green, this is my very first post at teamtreehouse. I am a new user and an infant in coding, so I have no idea what Jsfiddle or Codepen are yet.

Chase Swanson
PLUS
Chase Swanson
Courses Plus Student 8,886 Points
Chase Swanson
Chase Swanson
Courses Plus Student 8,886 Points

Sorry about that Brian. Both started with "B" and I was not paying attention.

Jsfiddle is a website you can go to, try out code and see what it does. Pretty handy. Codepen is similar.

You can then copy and paste the code into questions so that the forum can help diagnose.

You can do the same thing from your workspaces I am pretty sure.

Brian Galassini
Brian Galassini
3,521 Points

I've been using workspace to play around with code, but I bet those would be more convenient. Again, thank you.