最近用element-ui写项目的时候遇到了一个小问题。
当我上传了一张图片之后，我发现在前端显示的照片是变形的。相差不多还好，但有些图片宽高充满之后巨丑好嘛。于是我开始寻找优化的方法
默认的宽高均为170px，我分别尝试了img标签和通过background属性来显示图片的方法得到了以上五张图片。
其中第二张和第四张看起来像是我想要得到的效果，其实不然，上图所用的图片，图片的宽高比大于设定的宽高比，如果换一张图片的宽高比小于设定的宽高比的图片呢（下图）
可以看到第三张和第五张是我想要的效果
我想到了两种思路，第一种是有一个我不知道的属性可以自动判断，第二种思路就很简单明了，在图片渲染之前判断宽高比的大小来设置相应的css。首先我们来看一下笨办法：
如何来判断图片的宽高比和自己设定的宽高比的大小呢？
在element中的el-upload组件里存在文件上传成功时的钩子on-success ，在这个钩子里自行计算大小比较。但我觉得这个方法有些笨拙而且十分有局限性，比如我想要直接在页面上展示一张图片或者跳出element-ui，这个方法就是无效的。
偶然之间我看到element中有一个el-image组件
发现其中的组件中 fill:contain 属性是我想要的，但使用这个组件的话依然具有局限性。所以我直接查看了这个标签和标签上的属性，结果发现了object-fit属性
contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none被替换的内容将保持其原有的尺寸。
scale-down内容的尺寸与
none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。以上定义参考developer.mozilla.org/zh-CN/docs/…
试用了一下
简直不要太完美好不好！（应注意的是，这是img标签的属性）
