PageAdmin个性化建站心得——图片处理

前言

最近在用PageAdmin CMS系统建站，整体体验非常不错，比较容易上手，但是经常出现上传图片的尺寸不一出现显示问题，这篇博客主要就来谈谈不同栏目的图片尺寸要求以及如何通过处理图片。简单地使用windows10自带的一些图片工具就能轻松完成修图工作。个人记录一下，以便后面忘记了来查阅。

首页幻灯片

原则上来讲首页幻灯片的图片可以是任意尺寸大小的。但是有一个问题：首页幻灯片这个版块所占据的面积大小随你的图片像素变化而变化，也就是说你放多大的图片上去，它就会显示多大的面积。这样就会带来一个问题，如果图片过大，那么加载进首页就只看得到巨型图片，看不到其他版块。例如我们原始图片属性中宽度为4500像素，高度为3000像素，那么最终呈现的效果就是这样的：

首页的作用主要还是清晰明了的展示各版块导航以及信息的介绍，而幻灯片只是起到一定的装饰作用，切不可喧宾夺主。官方提供的模板里图片的像素大小为1920×500像素，虽然不一定必须参照这个尺寸，但是也要八九不离十吧。因此首页幻灯片的图片素材我们需要做尺寸的裁剪处理。

我们就以上面4500×3000像素的图片为例来进行简单的裁剪处理。并不需要用到诸如PS等专业的绘图工具，只需要windows10自带的图片工具便能轻松完成。

等比例缩放

首先，由于像素尺寸与官方图片差距甚远，没有办法直接剪裁，我们需要对这个超大图片尺寸进行压缩。直接双击图片，打开Win10自带的照片应用。点击右上角的三个点标志，从下拉的菜单中选择” 调整大小 “。

接着在弹出的菜单中选择**“ 定义自定义尺寸 ”**。

接着保持勾选保持纵横比，填写宽度为1920，则高度自动会变为1280，点击下面的“ 保存副本 ”另存为一份文件即可。

自此，图片处理的第一步大功告成了。

裁剪图片

修改了之后我们发现高度还是太高了呀，不用着急，接下来就是正式裁剪的时间了。将之前保存的副本选中，鼠标右键选中“ 使用画图3D进行编辑 ”，打开我们另一个强力工具：画图3D。

在软件中点击左上角的“ 裁剪 ”按钮进入裁剪页面，接着在右边侧边栏中将高度改为600，注意这里不要勾选锁定纵横比，接着就能剪裁到合适大小的图片了。

点击完成后直接保存就OK了， 不过注意它的保存不是保存副本，而是直接覆盖源文件。接下来我们再将改好的图片上传上去，看看效果，就会如同下面这样了。（不放自己的原图因为内容涉密）

产品展示

有了上面介绍的两个强力工具，那么在网站个性化建设中就能轻松自如地修改乱七八糟的素材图片了。对于产品展示界面实际上是有非常多的讲究的。

缩略图

首先产品的缩略图最好是方形的。当然其实缩略图本身并没有限制上传的图片尺寸比例之类的，但是如果你放了几张不同尺寸的图片，网页会自动适配成所有缩略图为上传图片中最大的长宽比。这样的话，很多缩略图就会被强行拉伸，看起来就非常违和。所以与其这样，不如一开始定好大家裁剪成方形图片，这样就不会出现这种问题了。

缩略图处理很简单，只要截图将图片保存后，直接使用画图3D工具进行精确裁剪即可。缩略图不用保证图片尺寸都要一样大，只需要有相同的长宽比就行了。

详情页

点击产品的缩略图，就能进入到产品的详情页了，详情页的正文之前会有一个产品图集，这里的图片也不是随便就上传的，如果图集的图片高度相去甚远，就会非常不美观。因为网页是会适配高度最大的图片划为幻灯片放映区域，而展示其他一些小图片就会出现大片空白的区域。

因此，产品的详情页图集要保持所有图片有几乎相同的高度才行。对于不同地方截取的图片，图片大小可谓是千差万别，我们可以首先用照片查看器修改它们的大小，这里主要针对高度进行修改，宽度则根据高度变化。之后再使用画图3D进行精细的修剪，就能达到不错的效果了。

总结

本篇文章主要解决了使用PageAdmin CMS建站系统中遇到的图片上传引起的各种显示问题，个人记录一下，以便后面忘记了来查阅。