Soo... Osay... Are you any good with coding?
[code]<html>
<title>resize test#2</title>
<head>
<style type="text/css">
element.style {
cursor:pointer;
height:512px;
width:505px;
}
.resized_img img {
border-color:#777777;
border-style:solid;
border-width:3px 3px 6px;
margin-bottom:5px;
}
img.resized {
display:block;
}
img, .input_check, .input_radio {
vertical-align:middle;
}
fieldset, img {
border:0 none;
}
.resized_img span {
background:none repeat scroll 0 0 #777777;
color:#FFFFFF;
font-size:11px;
padding:4px 8px;
}
.post_body .post {
line-height:150%;
}
body {
color:#F1F1F1;
font:13px arial,verdana,tahoma,sans-serif;
}
</style>
<body>
<font size="50" color="#000000">From this:</font><br /><br />
<div class="resized_img">
<span>Resized to 80% (was 632 x 641) - Click image to enlarge</span>
<img width="505" height="512" class="bbc_img resized" alt="Posted Image" src="http://img408.imageshack.us/img408/2421/servererrorfailxon.png" style="width: 505px; height: 512px; cursor: pointer;" origwidth="632" origheight="641" shrunk="1" newwidth="505" newheight="512" handled="1">
</div>
<!---- changes:
shrunk="1"
to
shrunk="0"
style="width: 505px; height: 512px; cursor: pointer;"
to
style="width: 632px; height: 641px; cursor: pointer;
-->
<br /><br /><font size="50" color="#000000">To this:</font><br /><br />
<div class="resized_img">
<span>Resized to 80% (was 632 x 641) - Click image to enlarge</span>
<img width="505" height="512" class="bbc_img resized" alt="Posted Image" src="http://img408.imageshack.us/img408/2421/servererrorfailxon.png" style="width: 632px; height: 641px; cursor: pointer;" origwidth="632" origheight="641" shrunk="0" newwidth="505" newheight="512" handled="1">
</div>
</body>
</html>[/code]
[code]initImageResize:function()
{var dims=document.viewport.getDimensions();ipb.global.screen_w=dims.width;ipb.global.screen_h=dims.height;ipb.global.max_w=Math.ceil(ipb.global.screen_w*(ipb.vars['image_resize']/100));},findImgs:function(wrapper)
{if(!$(wrapper)){return;}
if(!ipb.vars['image_resize']){return;}
Event.observe(window,'load',function(){$(wrapper).select('img.bbc_img').each(function(elem){if(!ipb.global.screensize)
{ipb.global.initImageResize();}
ipb.global.resizeImage(elem);});});},resizeImage:function(elem)
{if(elem.tagName!='IMG'){return;}
if(elem.readAttribute('handled')){return;}
var dims=elem.getDimensions();if(dims.width>ipb.global.max_w)
{elem.width=ipb.global.max_w;var percent=Math.ceil((ipb.global.max_w/dims.width)*100);if(percent<100)
{elem.height=dims.height*(percent/100);}
var temp=ipb.templates['resized_img'];var wrap=$(elem).wrap('div').addClassName('resized_img');$(elem).insert({before:temp.evaluate({percent:percent,width:dims.width,height:dims.height})});$(elem).addClassName('resized').setStyle('cursor: pointer;');$(elem).writeAttribute('origWidth',dims.width).writeAttribute('origHeight',dims.height).writeAttribute('shrunk',1);$(elem).writeAttribute('newWidth',elem.width).writeAttribute('newHeight',elem.height).writeAttribute('handled',1);$(elem).observe('click',ipb.global.enlargeImage);}},enlargeImage:function(e)
{var elem=Event.element(e);if(!elem.hasClassName('resized')){elem=Event.findElement(e,'.resized');}
var img=elem;if(!img){return;}
if($(img).readAttribute('shrunk')==1)
{$(img).setStyle('width: '+img.readAttribute('origWidth')+'px; height: '+img.readAttribute('origHeight')+'px; cursor: pointer');$(img).writeAttribute('shrunk',0);}
else
{$(img).setStyle('width: '+img.readAttribute('newWidth')+'px; height: '+img.readAttribute('newHeight')+'px; cursor: pointer');$(img).writeAttribute('shrunk',1);}},registerPageJump:function(source,options)
{if(!source||!options){return;}
[/code]
That's as far as I've been able to figure out how IPB does it.