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
brandonlind2
7,823 PointsMy img elemants are different sizes and I can't figure out how to make them the same.
I have three photos that vary in size, set up like a gallery. Two are bigger, then the img tag and take up 100% of it's width and another is smaller. The smaller one was smaller the the img element, so didn't take up 100% of the element's width, I fixed this simply by changing the css general img declaration from max-width: 100%; to width: 100%; , before I did this the other image to the left was expanding downward and taking up height as I made the window bigger and smaller. The img smaller then the element wasn't becoming bigger in height, so I was ending up with the left image a lot longer in height. I tired giving all the images a height of 45% to solve this but this didn't work. I'm alittle confused as to why the height: 45%; didn't work, I'm also wondering if there is a better way to fix this problem besides changing the max-width: 100%; to width: 100%;, because now the left image isn't expanding in height more but it is slightly longer still. It's like it's proportions to the right image are fixed and it always has a slightly longer height. help would be appreciated ty
2 Answers
cameroneckelberry2
8,701 PointsIf you want all your images the same size, they have to be the same size. Meaning you have to go into your favorite photo editor and adjust them so they are the same h x w . CSS and the browser does what it can, but it can't fix photos that are different sizes - at least as far as I know. I imagine you could but they may not look good. Moreover, the browser tries not to stretch your images and keeps everything proportioned. Let me if know if that helps
Keneque Thomas
4,147 Pointsimg { width = 100% }
The image will only take up its containing element. You can re-size an image at will using relative values. Giving an image padding and margin 0, then re-sizing it down to 45% will now give u 55% of space. Im also a rookie here but i think this might help a little....Also padding retracts an item inside of its border, and margin extend the border.
brandonlind2
7,823 Pointsbrandonlind2
7,823 Pointsthanks that helps a bit is it possible to make them take up the width of an element like an <li> ,so they would be the same size? Elements of the same kind are the same size I think by default. In the video the guy made his photos take up the full width of the element and they were all the same size and he said you can adjust the picture size by adjusting the elements size. He did this with the footer icons, he took pictures and sized them down, so they would have high resolution on a lot of devices. That's what I was trying to make them the same size that way. however it doesn't seem to be working for me. I'm using photos off of google earth not the photos in the project files. So this only worked for him, because his pictures were all the same size? I used his photos on another practice project and didn't have this issue.
cameroneckelberry2
8,701 Pointscameroneckelberry2
8,701 PointsRight. Just make the images the same size that you want to be the same size. That way they will respond and stretch the same way as the browser will keep the images proportional to their original size. For example consider this code I put together for you: http://jsfiddle.net/cameck/u2byny4b/2/ .