解决element-ui走马灯轮播图高度写死，无法自适应页面问题

1. 给图片加载load加载事件，并获取图片第一次渲染时的高度

  <el-carousel  
      :interval="4000" 
       arrow="always" 
       :height="bannerHeight + 'px'"  
    >       
 <el-carousel-item  v-for="(item, index) in bannerList"  :key="index">  
       <div >       
     <img   
      @load="imgload" ref="bannerHeight"  
      :src=" item.imgHead"   
      style="width: 100%; height: auto"    
        />        
  </div>     
   </el-carousel-item>  
    </el-carousel>

2. 增加监听事件，当视口发生改变时，得到图片改变的高度动态赋值给走马灯的height值

//增加监听事件,当视口发生改变时,得到此时的图片高度赋值给bannerHeight
  mounted() {
    this.imgload();
    window.addEventListener(
      "resize",
      () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
        this.imgload();
      },
      false
    );
  },
 methods: {   
   imgload () {  
    this.$nextTick(() => { 
       this.bannerHeight = this.$refs.bannerHeight[0].height;  
    
     })    
},
}

3，data中定义

<script>export default ({
data () { 
   return {    
       bannerHeight: ''
    }  
},
})
</script>

4、自动获取高度自适应完成！