今天没有开场白，因为我们很内敛！（害羞～）

我要喊个口号：一个好的设计，是可以改变产品价值的！

这次分享的是关于网站设计里图片的尺寸问题，图片不仅是信息的直接表达，也会为网站起到美观点缀的作用。但是在设计的时候会出现一些情况：例如

（一）一张图要在网页多个位置展示，且尺寸大小还不一致。这该如何是好，难道真的要设计多个尺寸的物料吗？

想想那些磨人的延展尺寸....

看着这些尺寸，你是不是想说：

这是谁埋的坑？正所谓前人栽树后人乘凉啊～凉凉啊～

（二）一张图做适配，却发现有的位置图变形了，或者被裁切了！不完整，重要信息看不到！这又是谁的问题？

这些问题其实都和设计有关系～

对，说的就是你…

解决问题：

1.如何避免一图多尺寸，一个图片在网站里可能会有多个展示位，所以尽量保持一个尺寸。如果不能保持一个尺寸，也尽量按一个大图进行比例缩放。纵观多图的网站，大多都会尽量一个图只有一个尺寸，然后同比缩放。

为什么图的尺寸要按比例呢？因为显示器常见分辨率：1024x768（4:3）、1280x1024（5:4）、1280x800（16:10）、1680x1050（16:10）、1920x1080（16:9），如今主流网站，电商类的图大多数都是1:1,极少数是4:3。社交类的是2:1.视频类基本是16:9（一个是因为HD的普及，二是要能更好的适配超宽大屏）

这里举个例子，如下图所示：这是我们做过的一个视频类网站——首页

所有图片都来自用户的视频，什么意思呢？就是首页展示的内容图，全是视频截图，这就很明确了，图片的比例必须是16:9的横向图，这个图出现的位置大概分为：首页、视频详情页、推荐位、分类列表、搜索结果页、个人主页、以及推荐位。

这是个人主页的图片

详情页右侧推荐位

没有编辑去选图，因为运营人员有限，全部图都来自用户。我们在设计的时候就先列出了图片的所有可能出现的位置，因为这个还有一个H5的版本，我们决定进行统一比例的设计，就是所有图都是按照16:9去设计。这样2个设备的图片可以共用，完美适配手机屏幕，简单统一。

如下图：

统一规范，设计就不会出错！简单即是美。

2.对于图片裁切的处理

这种图片处理方式就是一个图，利用前端技术进行截取，或许你见过这种网站，你看到一张图，然后点开查看内容，发现里面的图尽然比之前的图大且内容显示的更多，或者你看到一张有点变形的图，点开发现，其实图没变形。就像这样：

这是为什么呢？

因为这些图都来自用户，用户上传的图长宽比例不一，图片尺寸未知。生成预览图之类就出现了，图片被裁切，主内容显示不全，或者是变形的情况。

解决办法：

1.一般在用户上传图片的时候，会有一个图片裁剪过程，这个是需要用户手动去操作的。例如上传头像，你需要裁切图片，生产预览头像。这样的过程就是手动干预。也是最大的保障了图片的完整度和美观性。

就像这样：

2.也就是根据容器的尺寸，去缩放用户图片，然后再截取。可以居中截取，也可以左对齐、右对齐的截取。但是这个还是有不足的，图片重要部分可能看不到～

多加一点：有的地方是可以采用限制宽度高度自适应的办法去处理图片。

例如详情页：对于内容详情里的图片处理，可以是限制宽度，高度自适应，设计师可以自己设计一个宽度值，这样详情里用户的图就不会出现大小不一了。原理如下图所示：

网站图片常见尺寸问题，就讲到这，如果你有好的处理办法，也欢迎讨论。其实最好的办法是多和前端工程师沟通，他最懂你！

一个好的设计，是能改变产品价值的！