Laravel应用拍照上传图片预览变形，如何设置保存像素尺寸？

一、后端处理图片尺寸（保持宽高比） #

直接保存原图易因容器尺寸固定导致拉伸，推荐用Intervention Image扩展统一处理图片，同时保留比例：

1. 安装扩展

composer require intervention/image

Laravel 5.5+版本会自动注册服务提供者，无需额外配置。

2. 修改上传逻辑
   替换原move()方法，改用Intervention处理图片：

$request->validate([
    'image' => 'required|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000'
]);

$imageName = time() . '.' . $request->image->getClientOriginalExtension();
$imagePath = public_path('images/images/' . $imageName);

// 按比例缩放，最大宽度设为800px（可按需调整）
\Intervention\Image\Facades\Image::make($request->file('image'))
    ->resize(800, null, function ($constraint) {
        $constraint->aspectRatio(); // 强制保持宽高比
        $constraint->upsize(); // 不放大比原图小的图片
    })
    ->save($imagePath);

如果需要生成固定宽高的缩略图，可使用fit()裁剪多余部分，避免拉伸：

\Intervention\Image\Facades\Image::make($request->file('image'))
    ->fit(800, 600) // 裁剪为800x600固定尺寸，保持比例
    ->save($imagePath);

二、前端优化预览样式 #

即使后端处理了图片，前端容器尺寸固定仍可能导致变形，给图片添加CSS样式：

.dettaglio-pdca-unsplash-jw-mgy1h-js-y {
    width: 100%;
    height: auto; /* 高度自适应，保持比例 */
    /* 若容器高度固定，可改用以下配置 */
    /* height: 300px;
    object-fit: cover; */
}

• object-fit: cover：图片覆盖容器，裁剪超出部分，适合需填满容器的场景
• object-fit: contain：完整显示图片，容器空白处留空，适合需展示完整图片的场景

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