微信小程序輪播圖寬高計算


1.輪播圖外層容器swiper,每一個輪播項swiper-item

2.swiper標簽存在默認樣式

 width 100%  

 height 150px

 image 存在默認寬度和高度 320*240

 swiper 高度無法實現由內容撐開

3.綜上,需先根據原圖的寬度和高度 等比例給swiper定寬度和高度

 假定:原圖寬度和高度為 640 * 200px

 swiper 寬度 / swiper 高度 = 原圖的寬度 / 原圖的高度

 則 swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度

    即 height: 100vw * 200 / 640

4.css樣式

 swiper{ 

    width: 100%;
    height: calc(100vw * 200 / 640);
 }
 image{
    width: 100%;
 }
5.給image標簽添加mode屬性:mode="widthFix"
 寬度100%,高度自適應


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM