How to resize my image and maintain the aspect ratio?

Question

I'm trying to resize my picture so it fits the 640x640 size and keep the aspect ratio.

For example, if this is the original picture: http://i.imgur.com/WEMCSyd.jpg I want to resize in this way: http://i.imgur.com/K2BalOm.jpg to keep the aspect ratio (Basically, the image is always in the middle, and keeps the aspect ratio, the rest of space remains white)

I have tried making a program in C# which has this code:

Bitmap originalImage, resizedImage;

            try
            {
                using (FileStream fs = new FileStream(textBox1.Text, System.IO.FileMode.Open))
                {
                    originalImage = new Bitmap(fs);
                }

                int imgHeight = 640;
                int imgWidth = 640;

                if (originalImage.Height == originalImage.Width)
                {
                    resizedImage = new Bitmap(originalImage, imgHeight, imgWidth);
                }
                else
                {
                    float aspect = originalImage.Width / (float)originalImage.Height;
                    int newHeight;
                    int newWidth;

                    newWidth = (int)(imgWidth / aspect);
                    newHeight = (int)(newWidth / aspect);

                    if (newWidth > imgWidth || newHeight > imgHeight)
                    {
                        if (newWidth > newHeight)
                        {
                            newWidth = newHeight;
                            newHeight = (int)(newWidth / aspect);
                        }
                        else
                        {
                            newHeight = newWidth;
                            newWidth = (int)(newHeight / aspect);
                        }
                    }

                    resizedImage = new Bitmap(originalImage, newWidth, newHeight);
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }

But it doesn't work the way I need it to.

Answer 1

Let (W, H) be the size of your image. Let s = max(W, H) . Then you want to resize the image to (w, h) = (640 * W / s, 640 * H / s) where / denotes integer division. Note that we have w <= 640 and h <= 640 and max(w, h) = 640 .

The horizontal and vertical offsets for your image inside of the new (640, 640) image are x = (640 - W) / 2 and y = (640 - H) / 2 , respectively.

You can accomplish all of this by creating a new (640, 640) blank white image and then drawing your current image to the rectangle (x, y, w, h) .

var sourcePath = textBox1.Text;
var destinationSize = 640;
using (var destinationImage = new Bitmap(destinationSize, destinationSize))
{
    using (var graphics = Graphics.FromImage(destinationImage))
    {
        graphics.Clear(Color.White);
        using (var sourceImage = new Bitmap(sourcePath))
        {
            var s = Math.Max(sourceImage.Width, sourceImage.Height);
            var w = destinationSize * sourceImage.Width / s;
            var h = destinationSize * sourceImage.Height / s;
            var x = (destinationSize - w) / 2;
            var y = (destinationSize - h) / 2;

            // Use alpha blending in case the source image has transparencies.
            graphics.CompositingMode = CompositingMode.SourceOver;

            // Use high quality compositing and interpolation.
            graphics.CompositingQuality = CompositingQuality.HighQuality;
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;

            graphics.DrawImage(sourceImage, x, y, w, h);
        }
    }
    destinationImage.Save(...);
}

Answer 2

Can u add max-width:100% to image tag. And define your fixed width to parent tag using css. Hope this should work no need to write c# code for the same.

Eg. <figure > <img src="" > </figure>

Css
Figure{ width:600px }
Img { max-width: 100%}