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

图片变形很多人祭奠出了妖魔鬼怪般的各种大法，比如使用jq来写，或者使用css表达式来写。今天我总结的是使用css3来写，唯一最大缺点就是对一些浏览器版本不够兼容。下面就是关于如何使用css来让图片居中不变形

web端：

img{vertical-align:middle;object-fit: cover}

object-fit: cover 的效果和background-size:cover;的效果一样，一个缺点就是容器不够适应的原图大小的比例的话，会按照比例进行放大裁剪

　object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框

　　fill

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。

　　contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

　　cover

被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

　　none

被替换的内容尺寸不会被改变。

　　scale-down

内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸

详细的object-fit方法的介绍可以查看mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

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

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

重点就是：mode="aspectFill" 这块，详细介绍如下：aspectFill和object-fit: cover一样，都是和background-size:cover效果差不多

    scaleToFill{
        background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    }
    aspectFit{
        background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    }
    aspectFill{
        background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    }

转载本人博文时请注明出处和原文地址！！！