动态流是非常常见的样式，是用户生产内容的主要载体之一。

示例1:1的裁切样式

主要包含了用户信息、文字、图片和视频等内容。一般情况支持九张图片或一个视频，在有多张图片时，可以如下图做成宫格的样式适配，每张图片截取中间的正方形部分。

而只有一张图片或者视频时，为了保证图片和视频的预览效果，通常会做大尺寸的预览图，而图片的宽高尺寸并不固定，所以只截取中间方形的方案并不能满足要求，我们要根据这个情况做单独的适配方案。

首先我们要设定一个裁切的比例，比如我们取竖图最小裁剪宽高比为2:3，横图最大裁剪宽高比为3:2（这里的宽高比并不是固定的，可以根据实际需要自己定义比例，采用4:3、16:9等比例都是可以的）。

当图片宽高比小于2:3时，我们可以把图片中间区域按宽高2:3裁剪出来；

图片宽高大于2:3并且小于3:2时可以按原图比例预览；

图片宽高大于3:2时，把图片中间区域按宽高3:2裁剪出来。

另外要注意要给图片设置最大高度，否则图片高度太高会减少页面信息承载量，降低阅读效率，相应的也要限制最大宽度，否则会使图片规则不统一，从而页面适配效果不协调。

同样的，这个规则也适用于视频，由于全面屏手机占比越来越高，这些手机拍摄的视频大多是19:9、20:9的宽高比例，相比视频常用的16:9的比例更加细长，所以横屏视频可以统一裁剪为16:9比例，而竖屏视频可以裁剪为9:16比例。

动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的，可以根据自身平台需要来制定。

根据其他好文章的阐述，精简的提炼一下，以上分享这么多，会持续更新，记得关注~~

Powered by Froala Editor