Web Devs: Variable Image Size based on Browser Window Size

[Clocker]

Guys with web developer experience:

Is it possible for a browser to dynamically reformat the size of an image file (jgp or gif for example) so that it appears correctly in a browser window no matter how big the browser window? I guess what I'm asking is if a browser can change the dimensions of an image so that it and the rest of the page it is on are not hanging off the edges requiring lateral (and/or) vertical scrolling?

I think MSIE6 does domething like this but I'm not sure. What about other browsers?

Thanks,
C

 

[Mercutio]

Other browsers? None of the ones I use.

Determining window width isn't a big deal. Nor is keeping several copies of an image around (wouldn't do that dynamically. Give your poor web server's CPU a break).

 

[Will Rickards WT]

Never tried it... but after reading the following...
W3C HTML 4.01 documentation
Essentially use percentages to specify width and height of images and I think it will work. Note that 50% is not half the size of the image but half the size of the available horizontal or vertical space.

 

[Handruin]

I found something that might work with a little tweaking, but a lot of variables come into play. It needs a web server supporting php and GD version 2.0.1 or later, with Jpeg support.

http://www.hotscripts.com/Detailed/16213.html

 

[Clocker]

Thanks guys!

C

 

[Tea]

In a word, yes.

All modern browsers (and in this instance by "modern" I mean anything since fairly early Netscape versions - i.e., all modern ones and most old ones too) can and do resize images as part of the browser design. They are not particularly good image resizers, not compared to PMView or Thumbs Plus or what have you, but they work.

Easy method: specify image size in your code using percentages. This works fine for width in most cases, but is hopeless for image height.

Harder method: Use a gateway page which detects browser window size with a script (which need not be very complicated). Then use Javascript to write those parts of the page that have the image code. This works but means that you end up with horribe Java-ridden pages that are slow to load and buggy.

Best method: restrict your Javascript to the detection page only. Then use a stylesheet switcher to produce multiple versions of the page without having to actually code multiple versions of the page, just several stylesheets. You'll find a nice easy, clear one at A List Apart.

If you need help with your CSS, sing out. I've done a fair bit of that stuff lately and it is fresh in my mind still.

PS: for best results, you specify image size (and the size of everything else in pixels. The vaguaries of browser design are such that you just can't trust any sizing scheme (for text, pictures, or anything else) unless it specifies the size in pixels.

Some reading for you:

http://www.alistapart.com/stories/fear4/
http://www.alistapart.com/stories/sizematters/
http://www.alistapart.com/stories/practicalcss/
http://www.alistapart.com/stories/alternate/
http://www.alistapart.com/stories/n4switch/