Question

I got a website which contains a lot of projects with each project containing a sidebar.

In this sidebar it is possible to attach images to a project. The images attached will be shown in a gallery with 3 small thumbs at the bottom and one bigger image at the top of the gallery. The big image will refresh to another image when a visitor clicks on the small thumb @ the bottom of the gallery.

The thumbs are no problem, they are shown correctly.

My problem is the bigger image at the top of the gallery. The images that get uploaded have a big variety of sizes, while my holder has a width of 239 and height of 179. What would be the best way to scale the images so that they are shwon correctly to the visitors of the website?

Thanks Zapping (this code is usable for me):

int sourceWidth = imgToResize.Width;
   int sourceHeight = imgToResize.Height;

   float nPercent = 0;
   float nPercentW = 0;
   float nPercentH = 0;

   nPercentW = ((float)size.Width / (float)sourceWidth);
   nPercentH = ((float)size.Height / (float)sourceHeight);

   if (nPercentH < nPercentW)
      nPercent = nPercentH;
   else
      nPercent = nPercentW;

   int destWidth = (int)(sourceWidth * nPercent);
   int destHeight = (int)(sourceHeight * nPercent);

Answer 1

You can resize the image maintaining the aspect ratio and resave it. Or if you want to maintain the same image then you could find out new height and width, maintaining the aspect ratio, and apply it accordingly to the height and width properties of the img tag.

You can use these to resize the image or find the height and width.
http://snippets.dzone.com/posts/show/4336
http://www.switchonthecode.com/tutorials/csharp-tutorial-image-editing-saving-cropping-and-resizing

you can try out something on panning as well in case you decide to keep the larger sized images
How to zoom in and zoom out image using jquery?