图片的自适应以及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()
})
}