图片的自适应以及object-fit兼容IE浏览器
最近用vue做了一个项目，最近做下来总结了点关于图片适应的东西给大家分享下，第一次写博客，写不好请尽量。
一、元素的宽度可以用百分比设置，这样不同分辨率的电脑下元素的宽度都能自适应，但高度就不同了，尤其是对于图片来说，如果宽高比例不随着一起比例放大或者缩小就会导致变形，然后我刚开始想的方法是通过监听window的变化，用vue的ref去获取包含img的div，然后动态设置div的高度是window的多少计算出来，但vue是单页面开发，组件跳转后监听事件还在，但跳转到另一个组件不能通过ref获取对应的那个div，效果不影响但控制台会一直显示红色报错，然后后面百度找到了 element-resize-detector这个插件，它可以通过监听元素的变化，下面是使用步骤。
cnpm install element-resize-detector
import elementResizeDetectorMaker from ‘element-resize-detector’
mounted () {
this.erd = elementResizeDetectorMaker()
this.erd.listenTo(this.$refs.div, () => {
this.imgLoad()
})
}
不过只要元素发生变化就会触发事件，也不影响性能，不过也可以通过防抖节流让它不一直触发
用这个插件可以让元素的宽高适应于任何分辨率的电脑。要么就用媒体查询分别设置不同电脑分辨率下元素的高度
二、图片的object-fit
fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
如果图片没有经过特殊处理，后台传上去的图片分辨率大小各种各样，建议使用cover
img{
width:100%;
height:100%;
object-fit:cover;
}
效果其实就是覆盖完整个父级div，取中间部分，只要上传的图片宽高比例一致基本显示完全的图片不变形。
不过object-fit不兼容IE浏览器，这个是最难受的，也是我花了一天的时间百度了一堆东西才找到方法的。
我首先是找到一个比较简单的就是通过background-image，background-size:cover，background-repeat，background-position，用背景替换img，不过这个结合不了我的viewer图片查看这个插件，可能是我不懂这个插件的实现原理。
然后第二个就是polyfill.object-fit，但是我尝试了好久好像达不到效果，而且这个弄上去还很卡
最后就是用object-fit-images这个解决问题，具体步骤三步
cnpm install --save object-fit-images
import objectFitImages from ‘object-fit-images’
图片的css设置
img{
width:100%;
height:100%;
object-fit:cover;
font-family: “object-fit: cover;”;
}
然后获取到这个元素，vue用ref获取，或者document…
objectFitImages(放获取的元素);
具体可以看官网https://www.npmjs.com/package/object-fit-images
三、分享下viewer插件很好的一个图片查看器https://github.com/fengyuanchen/viewerjs
四、分享下图片懒加载，图片滑动出屏幕后再请求，优化性能，不过配个viewer体验效果不好，可能是因为我不懂viewer实现的源码
cnpm install vue-lazyload --save-dev
然后main.js中引入
import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload)
把src换成v-lazy
五、吐糟下elementui组件中的el-image，放在ie浏览器显示会出问题，解析出这个组件后会多一个class是el-image__inner–center,多添加了定位样式导致的，但官网用ie打开它显示的是正确的，可能什么影响了内部我也不太清楚，反正简单的标签能自己写就自己写没必要用别人写好的组件。
文章仅为本人做项目过程中遇到的东西，仅供参考，如有问题，欢迎指出！
对博客文章的参考，若原文章博主介意，请联系删除！请原谅