在做有用户上传图片操作的APP时,我们往往会遇到这样的问题:要上传的图片有各种各样的尺寸,那么如何在APP中展示这些图片能使APP看起来统一协调又不使图片变形呢?
下面我针对微信朋友圈上传图片进行研究的过程和结论分享。
分别上传了不同比例的图片,宽高比分别时1:6,1:5,1:4,1:3.5,1:3,1:2.5,1:2,1:1.5,1:1,1.5:1,2:1 ,2.5:1,3:1,3.5:1,4:1,5:1,6:1。
通过找规律,测试的结果如下:
假设显示一排三张图片的总宽度区域时W,图片之间的间隔时L;
图片宽高比X,图片1:1时显示的尺寸为Y*Y(以微信朋友圈为例,W=250,L=6,Y=180);*
1、当上传1张图片时,图片的尺寸如下
当X<1/3时,图片尺寸(Y/3)*Y,图片信息显示不完整;
当1/3<=X<=1时,图片尺寸为(Y/X)*Y,图片信息显示完整;
当1<=X<=3时,图片尺寸为Y*(Y/X),图片显示完整;
当3<X时,图片尺寸为W*[(W-2L)/3],图片显示不完整;*
2、当上传2-9张图片时,图片的尺寸如下
[(W-2L)/3]*[(W-2L)/3]*
注:当图片显示不完整的情况时,按照比例截取图片中间的部分,四周多余的尺寸不显示,严谨图片变形。
最后随意找一个来验证一下:
完全符合以上规律~
网友评论