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 trialLinda Duty
1,266 Pointsin 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
5,340 PointsIn 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.
Ben Falk
3,167 PointsOther 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
Courses Plus Student 94,610 PointsEditing the mages is the only way I know of to get them all the same size without the browser scaling them disproportionately.
Kasim Khan
4,925 Pointson css set the img max-width to 100%
Kasim Khan
4,925 PointsAlso set the max-height 100%
Aurelian Spodarec
7,369 PointsTo 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
1,266 PointsThanks to all. I found doing it in photo editing worked.
Yves Roulin
4,452 PointsAnother 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
Eric Tan
5,340 PointsEric Tan
5,340 PointsKeep in mind that this is not the best way to solve this problem as there is much more suitable methods and practice.