resizing images to fit the window?

Dear Lazyweb,

What's the right way to auto-scale images such that they fit exactly inside the browser window, while preserving their aspect ratio?

The images in the DNA Lounge photo and flyer galleries auto-scale to fit in the window. However, this only works horizontally. If the image is wider than the window, it shrinks, but if the image is still taller than the window, it does not. I'd like to make it scale in both directions, so that on an iPhone, both portrait and landscape images default to being fully visible, regardless of the phone's orientation.

The current (horizontal-only) behavior is is accomplished in CSS. The image has:

    width:100%; height: auto;
    max-width:900px; max-height:600px;

I think that there's no way to make the image fit within the window using only CSS (and also preserve the image's aspect ratio). I think the only way to accomplish that is with Javascript.

So I tried this:

function scale_images() {
var maxw = window.innerWidth;
var maxh = window.innerHeight;
var aa = document.images;
for (var i = 0; i < aa.length; i++) {
var img = aa[i];
var w = img.naturalWidth;
var h = img.naturalHeight;
var r = h/w;
if (h > maxh) {
h = maxh;
w = h/r;
if (w > maxw) {
w = maxw;
h = w*r;
} = w + "px"; = h + "px";
document.body.onload = scale_images;
document.body.onresize = scale_images;
document.body.onorientationchange = scale_images;

Well, that sort-of works, except that the viewport sizes I'm getting on iPhone are weird. In portrait mode, I am getting a 320x356 viewport (as expected) but when I rotate to landscape, I'm getting 320x139 instead of 480x208, which means the document is scaled up and the font size increases. What's the fix for this, short of disabling all scaling (even pinch-zooming)?

Surely others have solved this problem? Got examples?

Tags: , ,

The Worst Part of Going to Space? Your Fingernails Come Off.


To truly test whether you have the right stuff, imagine ripping out your own fingernails, on purpose. A couple of astronauts have done this before going into orbit, because they figure it’s better than losing them inside chafing, unwieldy spacesuit gloves [...]

Fingernail trauma and other hand injuries are spacewalkers’ biggest complaint, she said. In a recent study of astronaut injuries, at least 22 reported lost fingernails, a phenomenon called fingernail delamination. It happens because of pressure on the fingertips, but researchers also think circulation cutoff could be to blame.

I am surprised that this was not in the new Mary Roach book.

Tags: , ,

XScreenSaver 5.12 out now

XScreenSaver 5.12 is out now.

There are only a few visible changes this time, but there are some big performance improvements on MacOS, so Mac users should definitely upgrade.

I feel a nagging sense of guilt at having released a new xscreensaver without having written a new saver or two since the last release, but I've been sitting on this batch of bug fixes for almost five months waiting for inspiration to strike, and, well, it's time.

(Suggestions for new savers I oughta write are always welcome.)

Tags: , , , ,

Great Old Spice, for the Elder God your Elder God could smell like.


Tags: ,

  • Previously