To summarize:
1) I desire to create a scaling image that maintains its aspect ratio as seen on the tanagram partners site here - http://www.tanagrampartners.com , the faux background image that is.
2) I'm all about the win/win so I would like to offer a free t-shirt to the person who first comes up with the working code for this. Really. (Can you tell I need it in a hurry). Here's my t-shirt site - http://www.toghaus.com. Winner gets pick of the litter or a blank American Apparel shirt of your choice.

Anyway, the image is at the bottom of the markup, not as a background image in the CSS. Clearly it has something to do with the percentage settings and the min-height settings for the aspect ratio. I've tinkered with a number of things but have yet to be able to get it to work.

To make it easy, let me supply the image I'd like to scale. Here it is... http://toghaus.com/president/clouds.jpg

I really don't mean to be cheesy with my offer. I just like to give back when I can. And in this case, I can.

Thanks for the quick reply jacopsaj. I do need it to maintain the aspect ratio with the scaling as seen on the tanagram site. Without trying I don't imagine that works with this solution, no?

OK, I haven't tested this yet, but the following should work in IE:

Replace the lines

window.innerHeight
...
window.innerWidth

in the javascript by

document.body.clientHeight
...
document.body.clientWidth

Dave.

Of course I can,

and here it is. Please don't forget to test it in IE, I've just build in the IE part.
And thanks for the offer, but don't be silly, I have got enough shirts :) (However I'll remember you ;) )

Dave.

What do you exactly mean by scaling to full screen? The following line prevents the image from scaling larger than its original dimensions:
max-width:1000px;
max-height:765px;
You can outcomment them for testing puposes. The reason why the scaling in FF is a bit inconsitent lies in the implementation of the window.onresize event. In Safari for example, the function 'adjustRatio()' is called while actually resizing the window. In Firefox the function is first called, when the user resizED the window and stops moving the mouse. Unfortunately, I don't know any solution for this.

Dave.

I'm not sure I'm following this discussion accurately so maybe I'm missing something, but using width: 100% doesn't have to be 100% width of the browser window, it could also be 100% width of it's parent container. just a thought.

My first thoughts about this problem are...

<script>function ScaleBackground(){
var ScreenHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var ScreenWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth ,
imageWidth=1000, imageHeight=750;//actual image dimensions
var scaleFactor=ScreenWidth/imageWidth; //just put actual image width here instead of variable, if you like
Foo=new Image(); //create image
Foo.src="sillypic.jpg"; // assign filename
Foo.width=ScreenWidth+"px"; //match picture width to screen
Foo.height=scaleFactor*imageHeight+"px"; //alter height by scaling proportion
Foo.style.top=(ScreenHeight-(scaleFactor*imageHeight)/2)+"px"; //adjust vertical absolute position of image
//(CSS should be:- #yourdivwrittenatstartofdoc{position:absolute;top:0;left:0}#yourdivwrittenatstartofdoc img{position:absolute})
document.GetElementById("yourdivwrittenatstartofdoc").appendChild(Foo)}
</script>

This won't work as a simple script in the head, because the div isn't then defined; run it as function on window.onload; eg. window.onload=ScaleBackground;
Hope that makes sense... (and I haven't b'xed)

I was looking for a way of doing this and found the work you guys have done. I found that I had to make some alterations.
1)I compared the aspect ratios of the image and the screen and set the 100%/auto according to which was larger.
2)Instead of runnig adjust 'onload' which was unrelaibel for me I run it in a setTimeout at the end of the page. This seems to work reliably in IE and Firefox, but not in Safari (anyone know why, I am not a Safari expert)

<html>
<head>
<title>Test resize</title>
<style type="text/css">
* { margin:0; padding:0; }
#imgId {
width:100%;
max-width:1000px;
max-height:765px;
height:auto;
}
</style>
</head>
<body style='background-color:black;'>
<img id="imgId" src="album/Bai Calligrapher Dali 1995.jpg" />
<div id='info' style='position:absolute;left:2px;top:2px;'></div>
<script type="text/javascript">
var img = document.getElementById('imgId');
window.onresize = function() {adjustRatio(img);}
//document.onload = function(){ adjustRatio(img);}
var imageratio = img.height / img.width;

function adjustRatio(img)
{
var winheight = (document.body.clientHeight === undefined)?window.innerHeight:document.body.clientHeight;
var winwidth = (document.body.clientWidth === undefined)?window.innerWidth:document.body.clientWidth;
winratio = winheight / winwidth;

if(winratio < imageratio)
{
img.style.height = '100%';
img.style.width = 'auto';
}
else
{
img.style.width = '100%';
img.style.height = 'auto';
}
}
setTimeout("adjustRatio(img)",1);
</script>
</body>
</html>

How can I not find any other forums with advice on this subject?

also wolcotter, there is a plugin for firefox that will allow you to view the js code that you are trying to emulate