Show only 100px square portion of an image?

JavaScript
1

Hello,

I’m not entirely sure javascript is the route for this, but I can’t seem to figure out another way. Basically, what I’m trying to achieve is create a 100px by 100px square thumbnail of an image that can be clicked on to display the actual, full sized image. Now, the problem is, the full sized images are people uploaded by any visitor to the site, so they won’t always be perfect squares where I would be able to just define a width and height. In order to keep with the layout, I need the 100px by 100px thumbnail, so I’m wondering what would be the best way to acheive this when all the uploaded full sized images may not be perfect squares where they could jsut be resized.

If you’re still not sure what I mean, here’s a quick example:

A user uploads a picture that is 1200x983px, but the thumbnail for this picture must be 100x100px. If I were to just do something like <img height=“100px” width=“100px” />, the image would be all distorted since a perfectly square photo was not used, and if I were to just define a width of 100px only, the height may not be 100px.

Thanks,

Elementax

2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.thumb {
  position:relative;width:100px;height:100px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<div class="thumb" >
 <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="263" height=351"/>
</div>
<div class="thumb" >
 <img src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" width="263" height=351"/>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function ResizeThumbs(cls,sz){
 var ds=document.getElementsByTagName('DIV'),a,img,z0=0;
 for (;z0<ds.length;z0++){
  img=ds[z0].getElementsByTagName('IMG')[0];
  if (img&&(' '+ds[z0].className+' ').match(' '+cls+' ')){
   a=[img,ds[z0],new Image(),sz];
   a[2].src=img.src;
   ResizeLoad(a)
  }
 }

}

function ResizeLoad(a){
 if (a[2].width<40){
  a[4]=setTimeout(function(){ ResizeLoad(a); },200);
 }
 else {
  var w=a[2].width,h=a[2].height,ra=w>=h?['height','width',a[3]/h,h,w,'left','top']:['width','height',a[3]/w,w,h,'top','left'];
  a[0].style[ra[0]]=ra[3]*ra[2]+'px';
  a[0].style[ra[1]]=(ra[3]*ra[2])*ra[4]/ra[3]+'px';
  a[0].style.position='absolute';
  a[1].style.overflow='hidden';
  a[0].style[ra[5]]=(a[3]-a[0][ra[1]])/2+'px';
  a[0].style[ra[6]]='0px';
 }
}

ResizeThumbs('thumb',100);
/*]]>*/
</script>
</body>

</html>
3

Wow, thanks a lot, it works great.