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

Nathan Begnaud
Nathan Begnaud
8,221 Points
Posted by Nathan Begnaud
Nathan Begnaud
8,221 Points

How Do You Make Images Expandable?

I can't seem t find the answer to this question anywhere. I want to make my images and video expandable just like this website here: http://www.destinythegame.com/uk/en/media/official-live-action-trailer-become-legend Is it really complicated to do?

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

No It's not really complicated, when you build a responsive website, for images, often, what you do is setting the max-width of the images to 100%, this way, the image will take all the space available in its container whatever the viewport's size. So as an exemple if you have a div with an image inside, if you resize down the browser, the div will be smaller and the image will adapt its size accordingly.

I've just coded quickly this little exemple, try to resize the window with the max-width property applied to the image, try another time without it, and you'll directly see the difference.

Here is the codepen http://codepen.io/Azuk/pen/vfdIy

About video, I've seen in a treehouse course, If I remember well some javascript to accomplish it, a little plugin. The name of this one is fluidvis.js

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

I agree with what Geoffrey said, but you should add media queries and change the image to a bigger or smaller version of it at certain points to avoid the image becoming blurry. For example -

@ 320px - 540px {small version of image} @541px - 960px {medium version of image} @961px {large version of image}

You should also take into account pixel density. See this article - http://sebastien-gabriel.com/designers-guide-to-dpi/home