Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Ok, so all my images are difference heights in widths. How can i make them all the same height and width with css?

Ok, so all my images are difference heights in widths. How can i make them all the same height and width with css?

1 Answer

You Can add a class to the html image tag such as img src="images/ect/picture.jpg" class="all-images" but by default you can just head to CSS and target the universal image css selector img{ height: 200; width:200;} tag that will add all the CSS properties that you add in this tag to any image on your webpage unless you have a image in a different class or id like img src="images/ect/picture.jpg" id="other-image" or if you hard coded the width and height like img src="images/ect/picture.jpg" height="200" width="200" the universal img{} tag wont affect those images. so make sure all the images are clear on class or id or hard code height and width values. best to add id or class to images that you want the same width and height there might come a time when you want different images sizes or effects. Be sure to add the class="" or id="" value to each image you want the same. you can target the class in CSS like this .all-images{CSS CODE GOES IN HERE} or for id like this #other-image{CSS CODE GOES IN HERE} the class css use the dot then the name class the id value uses the # sign then the name of the id. Be sure to save all files and reload the page for the changes to take effect.

Thanks you really helped