如何调整图像大小并保持宽高比？

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%}