uniapp swiper高度怎么自适应的

<template>  
    <view style="width:100%;">  
        <swiper  :style="{height:`${height}`}"  :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"  
         :circular="true">  
            <swiper-item style="width: 100%;" v-for="it in imgs" :key="it.id">  
                <image :src="it.url" mode="widthFix" class="img" @load="onLoadImg"></image>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                imgs:[{url:'../../static/img/banner1.jpg',id:1},{url:'../../static/img/banner2.jpg',id:2},  
                {url:'../../static/img/banner3.jpg',id:3},{url:'../../static/img/banner4.jpg',id:4},  
                {url:'../../static/img/banner5.jpg',id:5}],  
                height:''  
            }  
        },  
        methods: {  
            onLoadImg:function(e){  
                this.height = e.detail.height + 'rpx';  
            },  
        }  
    }  
</script>  

<style>  
    .img{  
        display: block;//默认是inline-block 会有几px的空白  
        border: none;  
        width: 100%;  
        height: auto;  
    }  
</style>  

高度没办法自适应必须设置