BuddyPress.org

I am working on a small community website based on BuddyPress. It gives the ability to users to upload their avatars and then crop it while previewing. I am using jCrop to do that.

My problem is, when a user uploads his avatar, then the crop feature comes up along with the preview of the cropped image. The preview seems to be stretched.

I don’t really know if this is the problem of my css or the jCrop itself. I have read people with similar problem and the proposed solution was to remove (if any) fixed height or width has been applied to the preview container. I have tried that with sever other options and tweaks but nothing works.

Here is the problem in the image for best understanding.

Please note that the crop function itself is working fine. i.e, it only shows the area in preview that has been selected. But its stretched.

I really need your help on this.

If you want to check it even further, Here is the link to the production version of the site
Production Version
username/email: awaise171@gmail.com
pass: admin