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 trialNoah Halkins
2,335 PointsHow do I ensure that all my images on my website are the same size?
I am working on the "mobile" version of my site but my images are not all sized the same. Is there code I can put in to make them all the same size on the webpage?
3 Answers
Parag Nair
2,269 PointsYou can, but that is going to squish or stretch it based on the actual dimension of the image. You might want to be more specific when you say all images. Remember, even a Logo is an image but I am sure your intention is not to have literally each and every image on the site the same size.
jason chan
31,009 Pointsimg {
width: 100%;
}
If not resize them all with lightroom to the same size. You probably have to take web design track here to learn photoshop and how that works.
Christopher Sea
3,726 PointsUse CSS to set it so that images don't lose their shape when resizing a browser window:
'''css img { width: 100%; } '''
Use HTML to stretch/shrink an image so they all have the same size (will have to be done for each image):
'''html <img src="img/numbers-01.jpg" width="100" height="100"> '''
Use image editing software to edit all images to the same size, i.e., Preview (Mac), Picture Manager (PC), Photoshop, Fireworks, or Illustrator.
Christopher Sea
3,726 Pointsthe html code isn't showing, not sure why.