ASP.NET MVC C#项目中图片移动到文件夹后前端显示被裁剪问题如何解决

你当前的后端上传逻辑本身不存在问题，前端展示裁剪是样式配置或图片适配规则导致的，可按以下方案处理：

1. 问题根因定位 #

首先检查前端书籍封面展示节点的CSS配置：

• 大概率是图片外层容器设置了固定宽高，且object-fit属性值为cover，容器宽高比和书籍竖版原图的比例不匹配，导致图片上下部分被裁切。
• 快速验证：给对应img标签加临时行内样式style="width:100%;height:auto;object-fit:contain!important;"，刷新页面如果图片能完整展示，即可确认是样式问题。

2. 修复方案 #

方案A：前端调整样式（改动最小，优先选择） #

调整书籍封面展示区域的CSS规则即可：

.book-cover {
  /* 宽度和容器对齐，高度自动适配原图比例 */
  width: 100%;
  height: auto;
  /* 如果必须固定容器高度，取消固定height改为设置aspect-ratio匹配书籍比例，同时object-fit用contain */
  /* aspect-ratio: 2/3;
  object-fit: contain; */
}

方案B：后端统一生成适配缩略图（适合对展示尺寸有严格要求的场景） #

如果需要所有书籍封面统一展示尺寸，可在上传时额外裁剪符合比例的缩略图，避免前端适配出现错乱：

1. 先引入.NET常用图片处理库SixLabors.ImageSharp
2. 调整上传逻辑，新增缩略图生成步骤，同时修复原有代码的路径硬编码、文件校验漏洞：

// 引入命名空间
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using Microsoft.AspNetCore.Hosting;

// 注入IWebHostEnvironment获取wwwroot路径，不要写死绝对路径
private readonly IWebHostEnvironment _webHostEnvironment;
public YourController(IWebHostEnvironment webHostEnvironment)
{
    _webHostEnvironment = webHostEnvironment;
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AddBook(Book book)
{
    var file = HttpContext.Request.Form.Files[0];

    if (file.Length > 0 && file.Length < 10000000)
    {
        // 改用动态获取路径，适配部署环境
        var path = Path.Combine(_webHostEnvironment.WebRootPath, "Images");
        var filename = book.Isbn + Path.GetExtension(file.FileName);
        string[] fileExtensions = { "jpg", "jpeg", "png" };

        if (!fileExtensions.Any(o => filename.EndsWith(o)))
        {
            return RedirectToAction("AddBook");
        }
        // 新增文件头校验，避免伪造后缀的恶意文件上传
        using var stream = file.OpenReadStream();
        var headerBytes = new byte[4];
        stream.Read(headerBytes, 0, 4);
        var jpgHeader = new byte[] { 0xFF, 0xD8, 0xFF };
        var pngHeader = new byte[] { 0x89, 0x50, 0x4E, 0x47 };
        if (!jpgHeader.Take(3).SequenceEqual(headerBytes.Take(3)) && !pngHeader.SequenceEqual(headerBytes))
        {
            return RedirectToAction("AddBook");
        }
        stream.Position = 0;

        // 保存原图
        using (var fileStream = new FileStream(Path.Combine(path, filename), FileMode.Create))
        {
            stream.CopyTo(fileStream);
            book.Picture = filename;
        }
        // 生成适配前端展示的缩略图
        var thumbDir = Path.Combine(path, "thumbs");
        Directory.CreateDirectory(thumbDir);
        stream.Position = 0;
        using var image = Image.Load(stream);
        image.Mutate(x => x.Resize(new ResizeOptions
        {
            // 按需设置匹配前端的尺寸，比如2:3的书籍封面比例
            Mode = ResizeMode.Crop,
            Size = new Size(240, 360)
        }));
        image.Save(Path.Combine(thumbDir, filename));

        _db.Books.Add(book);
        _db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View();
}

调整后前端直接调用thumbs目录下的裁剪后图片即可。

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