详细element-ui的走马灯carousel轻松实现自适应全屏banner详细过程

div部分

   

     

     

   

 

CSS部分

.bannerImg{

    width: 100%;

    height: inherit;

    min-height: 600px;

    min-width: 1400px;

  }

vue.JS部分

var vm = new Vue({

el : '#apptwo',

data : {

bannerHeight:"",

BannerImg:[

          "${request.contextPath}/statics/BCHimg/b6.png",

        "${request.contextPath}/statics/BCHimg/b6.png"

          ],

mounted(){

this.setSize();

  const that = this;

  window.addEventListener('resize', function() {

    that.screenWidth = $(window).width();

    that.setSize();

  }, false);

    },

methods : {

setSize: function () {

console.log(this.bannerHeight)

    this.bannerHeight = 740 / 2560 * this.screenWidth

    if(this.bannerHeight > 740) this.bannerHeight = 740

    if(this.bannerHeight < 600) this.bannerHeight = 600

  },