What would be a good way to scale images in C#?

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
http://stackoverflow.com/questions/2207508/how-to-zoom-in-and-zoom-out-image-using-jquery/2207557

Answer 2

All about resizing. http://www.codeproject.com/KB/GDI-plus/imageresize.aspx

Answer 3

Proportional scaling can also be done with CSS. Consider an image 100px wide by 200px high.

<img src="image.png" style="max-width:50;max-height:50;">

will fit the image into a box 50x50px i.e. produce an image 25x50px. Analogously,

<img src="image.png" style="min-width:500;min-height:500;">

will produce and image 500x1000px.

In your case

<img src="image.png" style="max-width:239;max-height:179;">

This might be a good solution for you since your images are small and you're going to load the thumbnail and the image anyway, might as well be the same image, save bandwidth and make use of the caches.