
产品图主体被裁掉,通常与固定比例缩略图或前端容器的裁切有关。先找出裁切发生在哪一层,再决定是否调整原图;把同一张图反复上传,往往只会重新产生相同结果。
先判断文件被裁,还是显示被裁
在前台打开图片的实际地址,比较原图、缩略图和页面显示。
- 缩略图文件本身已经缺少主体:检查WordPress、主题或商城注册的图片尺寸与硬裁剪设置。
- 图片地址完整,但页面只显示中间部分:检查容器比例、固定高度和 object-fit: cover 等样式。
- 桌面正常、手机被裁:检查移动端是否使用另一尺寸或另一套容器样式。
- 更换图片后仍旧:核对缓存与实际加载的 srcset 地址。
浏览器“在新标签页打开图片”可能只打开当前选中的缩略图,并非原始文件,比较时要确认文件名和尺寸。
根据用途选择方案
产品目录需要整齐,并不一定要裁掉产品。可以保留统一画布比例,在拍摄或制图阶段给主体留白;前端需要展示完整主体时,可采用 contain 类显示方式,但应接受边缘留白。
如果确实需要满版裁剪,应给构图留安全区域,并在不同屏幕尺寸检查。对于细长零件、包装文字等关键内容,居中裁剪尤其容易丢失信息。
调整尺寸后,旧图片不会自动全部重做
主题或代码改变缩略图规则,通常主要影响之后生成的图片。已有附件可能仍使用旧尺寸。需要重新生成时,先在少量图片上测试并保留原图;大型媒体库要评估磁盘空间与执行时间,避免一次性占满资源。
不要为了修复几张图直接删除整个uploads目录。若更换图片文件,还要核对文章引用和缓存,防止旧地址失效。
验收看实际页面
检查列表页、商品详情、相关产品模块以及手机端。确认主体完整、清晰度足够、图片比例稳定,而且没有把小缩略图放大成模糊大图。对比原图文件大小和页面实际下载资源,避免为了不裁切而加载远超显示需要的大图。
直接把原图做成正方形是不是最好? 取决于页面要求。统一画布有利于目录一致性,但不应扭曲产品比例;使用留白通常比拉伸主体更合适。
参考资料
相关问题
本文为通用排查指南,依据所列官方资料整理;菜单名称和行为可能随版本及主机环境变化。配图为AI生成的概念示意,不是实际故障截图。
