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

CSS How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Ben Brenton
Ben Brenton
266 Points
Posted by Ben Brenton
Ben Brenton
266 Points

Adjusting 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
Burak Samra
2,431 Points

Hey!

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
Joel Smith
14,779 Points

Great answer, Burak!

Burak Samra
Burak Samra
2,431 Points

Thank you Joel! I'm glad I could help (and glad that I learned it :) ) Thanks Treehouse!

Joel Smith
Joel Smith
14,779 Points
Joel Smith
Joel Smith
14,779 Points

It 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
Joel Smith
14,779 Points

try 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
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

Burak/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
Joel Smith
14,779 Points

My 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
Burak Samra
2,431 Points
Burak Samra
Burak Samra
2,431 Points

Happy 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!