1. 程式人生 > >mpvue小程式中圖片根據自身寬高做自適應

mpvue小程式中圖片根據自身寬高做自適應

需求:小程式因為自身上傳包大小的限制(每個包2M,使用分包總共可以上傳8M),所以小程式的靜態資源主要是放在伺服器端(主要是圖片資源)。但是從伺服器獲取圖片時有可能出現下面一種情況:

返回的是圖片的url地址,但並沒有圖片自身的寬高  ==>>  導致結果:無法根據圖片的寬高和螢幕寬度,計算得出圖片的高度,從而給圖片做自適應。

計算高度的方法:圖片自身寬度 / 圖片自身高度 = 螢幕中圖片寬度 / 螢幕中圖片高度      ==>>  即利用圖片的寬高比

 

解決方法: 

1. 利用微信小程式API   wx.getImageInfo

   獲取圖片的資訊;

從返回的資料中獲取到圖片的寬高。

 

2. 根據圖片自身的寬高和螢幕的寬度, 計算圖片的高度。從而實現圖片的自適應。

 

文章僅為本人學習過程的一個記錄,僅供參考,如有問題,歡迎指出!