確保img的寬高比固定
阿新 • • 發佈:2018-12-05
html:
<div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1811/7c/8e5c4ab8ee8b7402.jpg_750x200_dd7a38dd.jpg" alt=""> </swiper-slide> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1811/a8/cb43c4ac6c215d02.jpg_750x200_83dee994.jpg" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div>
css
第一種方法:
wrapper{ width:100%; height:31.25vw }
第二種方法:
wrapper{ overflow: hidden; width: 100%; height: 0; padding-bottom: 31.25%; }
31.25%為固定寬高比