resize images on load

[joejoeknows]

trying to resize images based on their hxw so I'm not stretching out tall pictures with css. What am i doing wrong here?

resizePics = function()
{
   rsRoot = document.getElementById("resize");
   for (i=0; i<rsRoot.childNodes.length; i++)
   {
     node = rsRoot.childNodes[i];
     if (node.className=="preview")
     {
       node.onload=function()
       {
        this.height = this.height * .5
        this.width = this.width * .5
       }
     }
   }
}
 
window.onload=function(){
   resizePics();
}

<tr>
 <td align="center" id='resize'>
  <ul class='hoverbox'>
    <li ><a href='showpicture.php?id=69&n=1&t=main'><img src="pics/69/main/1-thumb.jpg" /><img class='preview' src='pics/69/main/1.jpg'/></a> </li> 
    <li ><a href='showpicture.php?id=69&n=3&t=main'><img src="pics/69/main/3-thumb.jpg" /><img class='preview' src='pics/69/main/3.jpg'/></a> </li> 
  </ul>
 </td>
</tr>