vue + element-UI + banner自适应

HTML

<el-row>
   <el-col :xs="24" :sm="24" :md="24">
       <div class="block indexBanner" :height="bannerHeight + 'px'">
           <el-carousel :height="bannerHeight + 'px'" id="el-carousel">
               <el-carousel-item v-for="(item,index) in homeBannerNewsList" :key="index">
                   <img ref="bannerHeight" @load="screenSize" class="indexBannerImg" :src="item.content">
               </el-carousel-item>
           </el-carousel>
       </div>
   </el-col>
</el-row>

JS

data () {
    return {
        bannerHeight: '',
        indexScreenWidth: ''
    }
},
mounted () {
    this.screenSize()
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height
      this.screenSize()
    }, false)
},
methods: {
    screenSize: function () {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
      })
    }
}

CSS

.indexBanner{
    overflow: hidden;
}
.indexBannerImg{
    width: 100%;
    height: auto;
}

来源
转载自：https://www.cnblogs.com/yuwenjing0727/p/11081459.html