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 Responsive Web Design and Testing Responsive Web Design

Linda Duty
Linda Duty
1,266 Points
Posted by Linda Duty
Linda Duty
1,266 Points

in setting up a gallery, how do you get the pictures to be the same size?

in the html course, Nick's picture are all one size...mine aren't. Do I have to edit every picture before uploading it into the image folders?

6 Answers

Eric Tan
Eric Tan
5,340 Points
Eric Tan
Eric Tan
5,340 Points

In HTML , you can set a width and height for each element such as : 

<img src="picture.png" alt="A picture" height="100" width="100">

Another method is by using CSS which you will learn later. All the best.

Eric Tan
Eric Tan
5,340 Points
Eric Tan
Eric Tan
5,340 Points

Keep in mind that this is not the best way to solve this problem as there is much more suitable methods and practice.

Ben Falk
Ben Falk
3,167 Points
Ben Falk
Ben Falk
3,167 Points

Other people are suggesting setting width and height, and while that works (and might be enough for now, while you are learning) be aware that it could result in skewed, out of proportion images. Really, the only way to fix it is to edit the images themselves in Photoshop or similar, and make sure they are the correct size to start with.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Editing the mages is the only way I know of to get them all the same size without the browser scaling them disproportionately.

Kasim Khan
Kasim Khan
4,925 Points
Kasim Khan
Kasim Khan
4,925 Points

on css set the img max-width to 100%

Kasim Khan
Kasim Khan
4,925 Points
Kasim Khan
Kasim Khan
4,925 Points

Also set the max-height 100%

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

To get the images on the same sizez you can eather make it on HTML or in CSS. I recomend do it on CSS.

In HTML:

<#mg src="somePiture.jpg1" width="200" height="200" > <#mg src="somePiture.jpg2" width="200" height="200" >\

Dont use the dash bdw, the phone write <img..

Or in CSS

img{

max-width:100%;
max-height 100%;

}

OR the best way is to make them in the same scale like in photoshop . You can make a hight resolution in big dimensions and for phone dimensions for the best image quality . :)

Linda Duty
Linda Duty
1,266 Points
Linda Duty
Linda Duty
1,266 Points

Thanks to all. I found doing it in photo editing worked.

Yves Roulin
Yves Roulin
4,452 Points
Yves Roulin
Yves Roulin
4,452 Points

Another thing to remember is that the file size of the images will be the same (even after applying width and height via CSS) so you better make them smaller in Photoshop in the first place.

Thanks