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 trialBen Brenton
266 PointsAdjusting picture size in .html file
I have a picture I need to reduce in size for my project - at the moment I am adjusting the width and height properties in my .html file within the <img src> tag, but is this advisable, particularly with regard to cross-platform functionality?
4 Answers
Burak Samra
2,431 PointsHey!
To make the html file less crowded and purely structure-based, you could try giving the image an id (or class, if there are several images that you want in the same format, size etc.) and give this id (or class) properties in your css file.
As for fluidity, or as you said cross-platform (to view the page on devices with different screen sizes and resolutions), you could try using for instance percentages, which are always relative to some other value, instead of pixels, which are usually fixed and won't resize properly.
The link below can help with the logic and syntax of percentages: https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
Also, if you haven't done so yet, you could check out the CSS Basics course, under which there is a whole stage called "Understanding Values and Units" for applying to any type of html elements.
Hope you find the answer you need soon! :)
Cheers!
Joel Smith
14,779 PointsIt is suggested for cross-platform functionality, particularly with mobile devices in mind, that you use percentage values to adjust the sizes of elements, including pictures.
Joel Smith
14,779 Pointstry the following in your CSS
img {
display: block;
width: 100%;
height: auto;
}
In the width, you can use whatever percentage that suites your layout style, and the auto in height will ensure that the aspect ratio for the picture is kept. In this way, you can resize just about any element on your page.
Good luck and have fun with it!
Ben Brenton
266 PointsBurak/Joel,
Thank you both for your help, I've only been on Treehouse for a few days but already it has been more help then I could have ever imagined, particularly the forum which is very quick working indeed!
I am working on something else on my project at the moment but I will return to this advice when I come back to working on the mobile side of my project.
Ben.
Joel Smith
14,779 PointsMy pleasure, Ben.
I agree that the forums can be the best resource when stuck. I think the general coding community is like this where there are tons of resources available to help when you are doing something that has you baffled.
Good luck.
Burak Samra
2,431 PointsHappy to (be able to) help, Ben.
I'm also on Treehouse for a month now, and I find it quite impressive how it works, with courses and the forum!
Cheers!
Joel Smith
14,779 PointsJoel Smith
14,779 PointsGreat answer, Burak!
Burak Samra
2,431 PointsBurak Samra
2,431 PointsThank you Joel! I'm glad I could help (and glad that I learned it :) ) Thanks Treehouse!