图片自适应

.wrapper
        overflow:hidden
        width:100%
        height:0
        padding-bottom 40.7%
<div class="wrapper">
        <swiper :options="swiperOption" >
            <!-- slides -->
            <swiper-slide>
                <img class="swiper-img" src="../../../../static/images/swiper1.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="../../../../static/images/swiper2.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="../../../../static/images/swiper3.jpg" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>

  wrapper是父级元素

/*wrapper宽度是百分之百,高度会根据宽度自动撑开40.7,,这样就实现了宽高比例40.7的比例。*/
/*不能写在height上,因为如果写在高度上 是父级元素的高度*/

猜你喜欢

转载自www.cnblogs.com/gaidalou/p/10715919.html