解决object-fit兼容IE浏览器实现图片自适应

前言

最近做一个vue项目需要做一个上传头像功能，本身来说这是一个非常简单的功能，因为我这边用的是element ui所以我就直接使用element 自带的上传头像组件。

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

轻松又愉快，就完成上传图片并自带预览效果

遇到问题

这时就出现一个问题用户上传图片不一定会完全符合我们设定的宽高比，因此就会出现图片被拉伸压缩来符合我们的设定的宽高比。

原图

上传后

这样的效果，明显是有点不太理想的。

第一步解决方案

因此我们需要改变这个压缩效果，我们最简单的方法就是设定CSS属性object-fit，能用CSS实现的话就是坚决不要使用JS。
写法非常简单，就两三行代码就可以了。

img {
  object-fit: cover;
}

增加object-fit后效果图

增加这个object-fitCSS属性后，可以看到图片虽然是被裁剪了，但现在已经没有被压缩变形了。这个样子其实还是可以接受的。

顺便研究一下object-fit

object-fit 的取值范围

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

效果对比图：

大家可以对照示意感受下，什么是内容拉伸(fill)，什么是内容全部都显示(contain)，什么是容器没有留白(cover)，什么是该多大就多大(none)。

object-fit兼容性

真的不看还好，一看才知道，这玩意不兼容IE浏览器，任何版本的IE浏览器。因为我这边的用户主要使用的浏览器就是IE，这个问题还是必须要解决的！

进一步解决方案，兼容IE

其实要实现兼容IE的话，网上有很多解决方案，用background-size,background-image替换图片，或者用JS根据图片的宽高重新设置显示框的宽高。。。
但反正结合我自己的代码，以及实际情况觉得需要改动的地方太多，太麻烦，而且实现起来也不理想。
最后找到一个最简单的兼容方法只需要四步，也不超过十行代码就完美让IE兼容了object-fit

1. cnpm install --save object-fit-images安装object-fit-images包
1. import objectFitImages from ‘object-fit-images’在你上传图片的组件里，import进来
3.图片的CSS设置

img{
object-fit:cover;
font-family: “object-fit: cover;”;
}

1. 在需要处理这个图片地方，执行这个objectFitImages处理图片方法即可。例如我的是vue项目，因此一般都是在mounted之中执行,如果这个图片还会改变的话，就是需要监听它的变化，在它变化后再执行一次这个处理方法。watch之下。

<img v-if="logo" :src="logo" class="avatar" ref="imghead" id="imghead" />

// var el = document.getElementById('imghead')
// objectFitImages(el)
objectFitImages( this.$refs.imghead)

有关更多object-fit-images的用法，可以查看以下地址。
object-fit-images github介绍地址

总结

至此就完美解决了图片上传被压缩拉伸展示的问题，兼容所有浏览器。还有就是IE浏览器是真的坑！