element走马灯图片自适应问题

一早上的时间全用来研究这个了，保证是比较好的方式 

<--html部分-->
<el-carousel :interval="2000" arrow="always" style="padding-top: 6vh;" :height="bannerH+'px'">
    <el-carousel-item v-for="(bitem,bindex) in bannerdata" :key="bindex">
	    <div style="color: #000000;text-align: center;overflow: hidden;width: 100%;">
            <img style="width: 100%; height: auto;" class="bannertt" :src="bitem.img" >
		</div>
	</el-carousel-item>
</el-carousel>



<--script部分-->
new Vue({
	el: '#app',
	data: function() {
		return {
            bannerH:this.setBannerH1,
        }
    },
    methods: {
        setBannerH(){
			this.bannerH=document.getElementsByClassName("bannertt")[0].height
		},
		setBannerH1(){
			var bwidth=document.getElementsByClassName("bannertt")[0].width;
			var bheight=document.getElementsByClassName("bannertt")[0].height;
			var ssss=document.body.clientWidth;
			this.bannerH=ssss*(bheight/bwidth);
		},
    }
    mounted(){
	    this.setBannerH1()//初始值根据图片的缩放比率和屏幕大小来定，不然走马灯开始时候就会默认一个值
			window.addEventListener('resize',()=>{
				this.setBannerH()
			},false)
	}
})