图片显示不全

💡 本篇你将完成：判断图片是被裁剪、被拉伸，还是原图比例不合适，并调整显示方式。预计 5 分钟。

产品图、画廊图或首页模块里的图片显示不完整，通常是模块使用了裁剪填充模式。优先把显示方式改成 Fit inside。

还没上传图片时先看规范

如果图片还没准备好，先看 图片规范，按用途准备尺寸，再上传会少很多返工。

先看现象

现象	常见原因	先怎么做
图片边缘被裁掉	使用裁剪填充	改成 Fit inside
图片变形	使用拉伸模式	不用 Stretch
列表不整齐	原图比例差异大	统一产品图比例
Banner 很糊	原图太小	换更大横图

一、改显示方式

进入页面设计器：

1. 点击图片所在模块。
2. 在右侧属性面板找到 Media 或图片显示方式。
3. 将显示方式改为 Fit inside。
4. 发布后刷新前台查看。

二、理解模式

方式	适合场景
Crop to fill	统一铺满卡片，但可能裁边
Fit inside	产品图完整展示
Stretch	一般不推荐，容易变形
Original size	少量特殊图片
Scale down	图片较大但不想放大

三、换原图

如果改显示方式后仍然不好看，说明原图比例本身不适合。

建议：

• 产品图尽量统一成正方形。
• Banner 用横图，不要用竖图硬塞。
• 图片主体不要贴边，四周留空白。
• 上传前先压缩。

避坑汇总

坑	后果	怎么避
🟡 产品图比例混乱	列表不整齐	统一正方形
🔴 使用 Stretch	图片变形	改用 Fit inside
🟡 Banner 用竖图	首屏难看	使用横图
🟡 原图太大	加载慢	上传前压缩

接下来

📚 图片规范 —— 按用途准备图片尺寸和格式。