解决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-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

• cnpm install--saveobject-fit-images安装object-fit-images包

• importobjectFitImagesfrom‘object-fit-images’在你上传图片的组件里，import进来

• 图片的CSS设置

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

• 在须要处理这个图片地方，执行这个 objectFitImages处理图片方法便可。例如个人是vue项目，所以通常都是在 mounted之中执行,若是这个图片还会改变的话，就是须要监听它的变化，在它变化后再执行一次这个处理方法。 watch之下。

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

2. 
   

3. // var el = document.getElementById('imghead')

4. // objectFitImages(el)

5. objectFitImages( this.$refs.imghead)

有关更多object-fit-images的用法，能够查看如下地址。

object-fit-images github介绍地址(https://github.com/fregante/object-fit-images)

总结

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