图片垂直居中裁剪显示

如何使用css来让图片居中不变形 微信小程序和web端适用

object-fit:cover;
/*（图片会被居中裁剪显示填满父集）被替换的内容大小保持其宽高比，同事填充元素的整个内容框，如果对象的宽高比与盒子的宽高比不匹配，改对象将被裁剪以适应。*/
object-fit:contain;
/*(图片比例不变父集会有空闲的区域)被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比，整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加*/
object-fit:fill;
/*(会变形图片宽高铺满整个父集div)被替换的内容大小可以填充元素的内容框，整个对象将完全填充此框，如果对象的宽高比不匹配其框的宽高比，你们对象会被拉伸*/
object-fit:none;
/*被替换的内容尺寸不会被改变*/
object-fit:scale-down;
/*内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。;*/

 
微信小程序端这块比较灵活，除了可以使用以上的方法之外，微信小程序image有自带的属性方法:

<image src='http://122.114.109.181:8888/img/webiste/2018/05/20180524092901026881.png' mode="aspectFill"></image>

mode="aspectFill"和object-fit: cover一样

缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 

缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

 

缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

 

缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变

小程序更多mode属性值参考https://developers.weixin.qq.com/miniprogram/dev/component/image.html