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.

CSS

Christopher Anderson
Christopher Anderson
1,601 Points

how do you re size an image in css

how do you re size an image in css

2 Answers

There are several ways, but here's one example:

img {
    width: 100%;
    height: auto;
}

To change the size just change the values for width and height. 100% will allow the image to scale up and down

Another example:

img {
    max-width: 100%;
    height: auto;
}

I got these examples from w3schools: http://www.w3schools.com/css/css_rwd_images.asp You might find it interesting.

Christopher Anderson
Christopher Anderson
1,601 Points

is there a different way instead of making a responsive image

Sure. Just set the width and height to whatever width and height you want.

img {
    width: 240px;
    height: 120px;
}

Several observations: if you set both width and height and aren't careful you might change the aspect ratio and distort the picture.