How does TheSixyOne.com proportionally stretch the image to full page?

Question

I love the new http://thesixtyone.com design. I am wondering how do they proportionally stretch the image to fit the whole background? Are they using CSS/Javascript or other tricks?

Answer 1

Both CSS and Javascript are used.
It takes the greater of height or width, sets the matching image dimension to that, then calculates the ratio of original dimension to the new dimension, then applies that ratio to the opposing dimension.

For example. Say the original photo was 100x100. If your screen is 200x100; then it stretches the first dimension (200 is larger than 100) to fit. This is a 2:1 ratio, so it does the same streatch to the other dimension. The resulting image is actually 200x200.

Add a touch more code to keep the whole thing centered (so the off-screen portions of the lessor dimension are equal), and voila.

In my example, the image would be moved up 50, so that you see the middle 100 (the screen size) of the picture that has been stretched to 200.

The image is actually a DIV tag with the background image property set.

Answer 2

Not sure what library they'e using but in their javascript source I did a search for "resize" and found:

Event.observe(window,"resize",t61.background.sync_size);

Which looks like they're attaching an event handler to window.onresize.