移动web必会技能-图片居中处理

我们在日常使用移动APP的时候，特别是一些资讯类的APP，都会有图片展示的相关UI，例如今日头条APP的单大图和三图模式，如下图：
单图：

三图：

或者是类似微博或者朋友圈这种9宫格的图片展示效果，如下图：

对于这些图片，如果你单纯的以为直接用几个，配置一下src地址，然后渲染在页面上，那就大错特错了?，对于这种类型的UI展示，我们需要明确下面几点：

图片在上传后，会有不同的大小，有的是长图（长大于宽），有的是宽图（宽大于长），或者是一些接近正方形的图片。

在保证图片原本长宽比的情况下，要想将图片显示在一个正方形的区域内，或者是固定长宽的区域内，是必须要截取一部分图片展示的。

采用CSS或者JavaScript都可以实现这种效果。

大家可以看下面这几张图，红色的是图片本身，虚线框就是展示出来的区域，便于理解：
宽图：

长图：