将图片分别发送到聊天界面，得到如下效果，我分别对图片进行1到5的排序，方便解说：

同样，图片为竖图时，图片比例以3:1为阈值，图片比例小于3:1时，高度固定、宽度等比缩放；当图片比例大于3:1时，图片的宽度和高度都保持一致，并都以3:1的缩略图尺寸展示，多于部分隐藏。

从上图可以发现1、2、3张图片的高度随图片比例变化始终保持一致即270px，而图片宽度不同（图片宽度由图片等比缩放而来）。

在看第4张和第5张图片，我分别上传的是3:1和4:1的比例，但是其缩略图的展示宽高一致。

通过上面的解说，想必大家也了解了什么是阈值，以及在做类似社交页面图片适配时该如何使用。

三、总结

1. 文字部分

在聊天界面中，标注时出现了两个变量，这时候我们可以考虑用百分比的方式进行标注。这样可以做到多个机型进行适配，保证项目能够顺利落地。

2. 图片部分

在做图片部分时，需要先设定阈值，然后我们在根据阈值进行方图、横图、竖图的适配工作。

参考链接：http://www.mobileui.cn/story-behind-the-chat-thumbnails.html?from=singlemessage 《聊天缩略图背后的故事：你不曾注意的那些细节》

作者：风筝KK，公众号：海盐社

本文由 @ 风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议