C#生成适配180×250容器的缩略图：小图放大模糊问题

这个问题我做图片画廊时也碰到过——原来的逻辑会强制把所有图片缩放到接近300像素的尺寸，小图被硬拉伸自然就模糊了。咱们可以从尺寸计算逻辑、高质量生成方式、前端显示适配三个层面来解决，保证不管原图大小，都能清晰适配你的画廊容器：

1. 修正尺寸计算：只缩小不放大 #

首先要把固定的maxPixels改成以画廊容器的宽高（180×250）为上限，计算时遵循两个核心原则：

• 严格保持原图的宽高比例，避免变形
• 原图尺寸小于容器时，直接保留原尺寸，不做任何放大操作

修改后的尺寸计算方法如下：

private Size GetThumbnailSize(System.Drawing.Image original)
{
    // 画廊容器的最大尺寸限制
    const int containerWidth = 180;
    const int containerHeight = 250;

    int originalWidth = original.Width;
    int originalHeight = original.Height;

    // 计算宽、高分别相对于容器的缩放比例
    double widthRatio = (double)containerWidth / originalWidth;
    double heightRatio = (double)containerHeight / originalHeight;

    // 取最小的比例，保证缩放到最大且不超出容器范围
    double scaleFactor = Math.Min(widthRatio, heightRatio);

    // 如果比例大于等于1，说明原图比容器小，直接返回原尺寸
    if (scaleFactor >= 1)
    {
        return new Size(originalWidth, originalHeight);
    }

    // 计算缩放后的尺寸（四舍五入到整数）
    int thumbnailWidth = (int)Math.Round(originalWidth * scaleFactor);
    int thumbnailHeight = (int)Math.Round(originalHeight * scaleFactor);

    return new Size(thumbnailWidth, thumbnailHeight);
}

2. 用高质量方法生成缩略图 #

Image.GetThumbnailImage方法在处理小图或某些图像格式时，容易出现明显的质量损失。推荐用Graphics.DrawImage来生成，它可以设置多种高质量渲染参数，保证缩放后的清晰度：

public System.Drawing.Image GenerateHighQualityThumbnail(System.Drawing.Image originalImage)
{
    Size thumbnailSize = GetThumbnailSize(originalImage);
    
    // 如果原图尺寸和缩略图尺寸一致，直接返回原图（避免重复处理）
    if (thumbnailSize.Width == originalImage.Width && thumbnailSize.Height == originalImage.Height)
    {
        return (System.Drawing.Image)originalImage.Clone();
    }

    // 创建目标Bitmap，设置像素格式和原图一致
    Bitmap thumbnail = new Bitmap(thumbnailSize.Width, thumbnailSize.Height, originalImage.PixelFormat);

    // 使用高质量插值模式，提升缩放清晰度
    using (Graphics g = Graphics.FromImage(thumbnail))
    {
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
        g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
        g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

        // 绘制缩略图，从左上角开始铺满整个Bitmap
        g.DrawImage(originalImage, new Rectangle(0, 0, thumbnailSize.Width, thumbnailSize.Height));
    }

    return thumbnail;
}

3. 前端容器适配：避免拉伸变形 #

生成合适尺寸的缩略图后，前端在180×250的div里显示时，也要用CSS保证图片按比例居中显示，不会被强制拉伸或裁剪：

.gallery-item {
    width: 180px;
    height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 可选：添加边框方便查看容器范围 */
    border: 1px solid #eee;
}

.gallery-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保证图片完整显示，不裁剪、不变形 */
}

这样处理后，大图会等比例缩小到容器范围内，小图保持原尺寸清晰显示，前端也能完美适配画廊容器，不会出现模糊或变形的问题。

内容的提问来源于stack exchange，提问作者Xion