Element-ui 走马灯实现宽高根据屏幕自适应

  Html部分

<el-carousel :height="bannerHeight + 'px'" style="z-index: -1">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src="/static/image/home/img(2).png"  class="bannerImg" />
          <img src="/static/image/home/img(2).png" class="bannerImg" />
        </el-carousel-item>
</el-carousel>

 声明

data() {
      return {
        // 图片父容器高度
        bannerHeight: 1300,
        // 浏览器宽度
        screenWidth: 0,
      }
    },

js部分

mounted() {
     
      // 首次加载时,需要调用一次
      this.screenWidth = window.innerWidth;
      this.setSize();
      // 窗口大小发生改变时,调用一次
      window.onresize = () => {
        this.screenWidth = window.innerWidth;
        this.setSize();
      }
    },

 methods: {
      setSize: function () {
        // 通过浏览器宽度(图片宽度)计算高度
        this.bannerHeight = 600 / 1920 * this.screenWidth;
      },
}