图片的居中处理（包含 横图和竖图）

在进行图片的缩略图展示的时候，经常会有横图和竖图的区别

1. 效果一：

   
   
   

   image.png

// home.vue
// 加了七牛的参数  使得图片无论是竖图还是横图都显示为正方形的

2. 效果二：

   如果使用img标签方法来展示图片

   • 当设置图片 width:100%, 横图满足需求，但是竖图会的高度会超出div标签的高度
     
     

     image.png
   • 当设置图片 height:100%, 竖图满足需求，但是很横图会的宽度会超出会超出div标签的宽度度
     
     

     image.png
   • 当设置图片 width:100%; height:100%, 图片会被拉伸变形
   

   image.png

   但是由于具体产品的需要，比如用户对图片的喜好时,需要直观的看出是横图还是竖图，上面的方法使用背景的方法同样是可行的

   
   
   

   image.png

// home.vue

但是存在一些用户勾选 或者取消按钮的时候，由于是背景图片，无法确定按钮的位置，只能在div标签的右上角，会出现这样的情况，并不能满足需求

image.png

3. 效果三：

   最后看了不知哪个网站的瀑布流布局，得到了灵感来处理这样的情况，即使用图片的宽高的最大值来限制

   
   
   

   image.png

// home.vue