Yii2中实现图片自适应需四步：上传校验（限定最小宽高200px）、服务端等比缩放（取min比例生成多尺寸图）、路径存库（原图/800px/200px三版本）、前端响应式渲染（CSS max-width或background-cover或picture+webp）。
在Yii2项目中实现用户上传图片后自动适配页面容器尺寸并保持比例不变形，需同时解决上传校验、服务端缩放、路径存储和前端渲染四个环节。
上传前限制原始图尺寸与格式
在模型 rules() 中强制限定最小宽高，防止过小图片被拉伸失真：
→ [['imageUpload'], 'image', 'extensions' => 'jpg, jpeg, png', 'minWidth' => 200, 'minHeight' => 200]
这一步必须加，否则用户上传 50×50 像素头像后强行放大到 300×300，边缘会严重锯齿化。
注意：maxWidth/maxHeight 在此处不设——留待缩放阶段统一控制输出尺寸，避免上传时误拒合理大图。
控制器内执行等比缩放并保存多版本
第一步：用 getimagesize() 获取原始宽高，计算缩放比例：
→ 若目标宽度为 800px，则 $scale = min(800 / $origW, $maxH / $origH)；【务必取 min 而非 max，否则会溢出容器】
第二步：创建真彩色画布，调用 imagecopyresampled() 缩放：
→ 使用 GD 的 imagecreatetruecolor($newW, $newH) + imagecopyresampled($thumb, $src, 0,0,0,0, $newW,$newH, $origW,$origH)
第三步：分别保存原图、800px宽主图、200px宽缩略图三个文件：
→ 原图存为 $path . $filename . '.' . $ext，主图存为 $path . $filename . '_800.' . $ext，缩略图存为 $path . $filename . '_200.' . $ext
第四步：将主图路径写入数据库字段 $model->image_url，缩略图路径写入 $model->thumb_url —— 后续模板中直接调用，不现场生成。
前端用 CSS 实现响应式自适应显示
方法一：纯 CSS 控制（推荐用于内容区图片）
→ 给 <img> 标签添加样式：max-width: 100%; height: auto;
→ 这样图片宽度随父容器变化，高度自动等比缩放，不会撑破布局。
方法二：背景图方案（适合 Banner、封面图）
→ 把图片设为父容器 background-image，配合 background-size: cover;
→ 注意：必须设置父容器明确宽高或 min-height，否则高度塌陷导致图片不可见。
方法三：使用 <picture> 提供 WebP 备选（提升加载速度）
→ 在 view 文件中写：<picture><source srcset="{$model->webp_url}" type="image/webp"><img src="{$model->image_url}" alt=""></picture>
→ WebP 版本需在缩放脚本中额外调用 imagewebp() 生成，体积比 JPEG 平均小 30%。
