当图片宽高和轮播图的框不一致时

在使用swiper时，遇到了插入的图片宽高和想在页面上展示的宽高不一致的问题，这样就很头疼，并且还要考虑网络差时页面抖动的问题。因为是图片，加入下面是文字，就会加载的比轮播快，那么很可能文字就会先显示在轮播的位置，等轮播加载完后在被挤下来.

废话不多说，直接上代码

img（333*222）

    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide>
                <img src="https://z1.muscache.cn/im/pictures/8e737c5e-4fd8-4ad7-92b2-490a8e46c4ec.jpg?aki_policy=large">
            </swiper-slide>
            <swiper-slide>
                <img src="https://z1.muscache.cn/im/pictures/bcb57d96-a776-4084-a69e-37a5c2ed6762.jpg?aki_policy=large">
            </swiper-slide>
            <swiper-slide>
                <img src="https://z1.muscache.cn/im/pictures/c3ee793c-eeec-4a75-99ef-80984fedcfda.jpg?aki_policy=large">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>

重点是padding-bottom 66.67% 是相对与.wrapper的宽度的百分比，
这样就能实现宽高自适应

.wrapper
        overflow hidden
        padding-bottom 66.67%   
        width 100%
        height 0
        img
            width 100%