element-ui 如何实时监测走马灯的高度，并且修改他

Question

我是一个vuejs初学者，今天在使用elementui走马灯的时候，发现不能根据图片设置高度，我也没办法获取图片的动态高度。

<template>
    <div class="main">
        <el-row>
            <el-col :span="24">
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="(item, key, index) in picList" :key="index" >
                        <el-button id="carouselBtn" type="text" v-on:click="openDownLoad(item.id)" >
                        <img :src="item.img" :alt="item.altstring" class="img-responsive center-block" ref="img" >
                        </el-button>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>

        
    <!--弹出层：下载对话框-->
        <el-dialog title="二维码下载客户端" :visible.sync="dialogFormVisible">
            <img :src="QRCodeIMG" alt="二维码" class="img-responsive center-block">   
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            QRCodeIMG:'',
            dialogFormVisible:false,
            picList:[{img:"static/assets/[e-mail]", altstring:"商户端",id:"1"},{img:"static/assets/[e-mail]",altstring:"用户端",id:"2"}],
        }
    },
    methods:{
        openDownLoad(indexNum){
            if(indexNum==1){
                this.QRCodeIMG='static/assets/商户端二维码.jpg';
            }else{
                this.QRCodeIMG='static/assets/用户端二维码.jpg';
            }
            this.dialogFormVisible=true;

        }
    }
}
</script>

<style scoped>
#carouselBtn{
    padding: 0px 0px;
}



</style>

这是我的代码，我想做一个类似ofo官网那样，随着图片缩小，走马灯的高度也缩小，我该怎么写？

Answer 1

换插件：vue-awesome-swiper