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

Design

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Responsive Images Question

Hi There

I am currently building

http://www.blueeyed-indev.co.uk/cooper/

and want the image that I am using at the top of the page to basically scale differently on a mobile phone screen. At the moment I am using max-width:100% so it scales proportionally. However I would like a bit more depth in the image when it goes to a smaller screen. Can anyone recommend a solution for this please?

G

5 Answers

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

Graham,

I'm curious as to what you mean by wanting "a bit more depth in the image when it goes to a smaller screen". Are you talking about resolution, image position, size, etc.?

J.T.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Graham,

Nice work! What sort of depth are you referring to?

Thanks!

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Both

What I would ideally like is for the image to be about half the height of the viewport on a phone at the moment I would say it is about one third.

G

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

Graham,

There's a special unit in CSS 3 that works with most popular browsers called vw or viewport width. You might try playing around with a media query that sets the width of the image like this: width: 50vw; -- although, this might not work in all browsers.

I'm sure Guil would probably be able to give you more information about sizing the image using these units if you find that you're still having trouble, but like I said, take a look at the CSS specification for the vw unit and see if it suits your needs.

Best of luck!

J.T.

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

cool JT thanks for that will have a mess about.

G