15-swiper-等比例计算swiper的高度

微信内置轮播图组件

<!-- 
    1、轮播图外层容器swiper
    2、每一个轮播项swiper-item
    3、swiper标签：存在默认样式
        （1）width：100%
        （2）height：150px   image存在默认的宽度和高度：320px*240px
        （3）swiper高度无法由内容撑开，只能我们自己修改样式
    4、先找出原图的宽度和高度  等比例 给swiper定宽度和高度
    原图的宽度和高度  1125*352px
    swiper宽度/swiper高度 = 原图的宽度/原图的高度
    swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度
    即 height = 100vw * 352 / 1125

    5、autoplay  自动轮播 默认5秒

    6、interval  修改轮播时间  

    7、circular  衔接轮播，可以让轮播图看起来更加像轮播图

    8、indicator-dots 显示 指示器/分页器/索引器

    9、indicator-color  指示器的未选择的颜色

    10、indicator-active-color  选中的时候的指示器的颜色
 -->
<swiper autoplay interval="2000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item><image mode="widthFix" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcar0.autoimg.cn%2Fupload%2F2013%2F2%2F18%2Fu_20130218165304639264.jpg&refer=http%3A%2F%2Fcar0.autoimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636973284&t=ca7ca3c14205aeede3e1dedc691566ff"/></swiper-item>
    <swiper-item><image mode="widthFix" src="https://img1.baidu.com/it/u=2371446806,3416411618&fm=26&fmt=auto"/></swiper-item>
</swiper>