使用element-ui的旋转灯笼轮播轻松实现自适应全屏banner图片

写在前面：网站轮播图片推荐使用swiper组件，非常方便快捷。接手一个项目，轮播图片是用element-ui轮播实现的。看起来不错，但是宽高是固定的，没有适配，所以会修改代码适配各种显示屏幕。bannerHeight属性用于控制banner层的高度，计算方法：根据浏览器的宽度计算比例图片高度：setSize:function(){this.bannerHeight=740/2560*this.screenWidthif(this.bannerHeight>740)this.bannerHeight=740if(this.bannerHeight<360)this.bannerHeight=360}为img添加样式：.bannerImg{width:100%;身高：继承；最小高度：360像素;最小宽度：1400px；}你完成了！为了适应不断变化的浏览器，监听浏览器resize:mounted(){this.setSize();常量那个=这个；window.addEventListener('resize',function(){that.screenWidth=$(window).width();that.setSize();},false);}