Question

I recently saw a link, on twitter, to path’s new website; with.me. There’s some pretty simple but neat things occurring on a with.me page, for example look at this one of Ashton Kutcher:

http://with.me/w/2275

My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a “snapping” fashion. It doesn’t resize with the browser, it instantly goes to the smaller size if the bigger one can’t fit in the browser window.

How are they doing this? I’ve been poking around the CSS for the past two hours. I have a test page of my own that I’ve been trying to get this to work on, but can’t figure it out.

Any ideas?

Answer 1

It’s done by applying different stylesheets based on screen size:

@media screen and (min-height: 1000px) {

If you’re using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.