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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Noah Halkins
Noah Halkins
2,335 Points

How 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
Parag Nair
2,269 Points

You 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
jason chan
31,009 Points
img {
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.

Use 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.

the html code isn't showing, not sure why.