微信小程序 --- 圖片自適應、本地圖片的使用


1、關於圖片自適應

image標簽中添加mode屬性:

默認值:scaleToFill  ----  不保持縱橫比例縮放圖片,使圖片的寬高完全拉伸至填滿image標簽

aspectFit  ----  保持縱橫比例縮放圖片,使圖片的長邊能夠完全顯示出來,也就說圖片可以完整的顯示出來

aspectFill  ----- 保持縱橫比例縮放圖片,只保證圖片的短邊能夠完全顯示出來,也就是說,圖片通常只在水平或垂直方向是完整的,另一個方向將會發生截取

top  ----  不縮放圖片,只顯示圖片的頂部區域

bottom  ----  不縮放圖片,只顯示圖片的底部區域

center  ----  不縮放圖片,只顯示圖片的中間區域

left  ----  不縮放圖片,只顯示圖片的左邊區域

right  -----   不縮放圖片,只顯示圖片的右邊區域

top left   ----  不縮放圖片,只顯示圖片的左上邊區域

top right  ----  不縮放圖片,只顯示圖片的右上邊區域

bottom left   ----  不縮放圖片,只顯示圖片的左下邊區域

bottom right  ----  不縮放圖片,只顯示圖片的右下邊區域

 

2、關於圖片引用

在wxss頁面中不能引用本地的圖片

解決方案:

1、要是希望在wxss文件中使用背景圖,我們可以使用網絡圖片,或者base64位的圖片

2、通常情況下在CSS文件中我們是沒有辦法拿到后台返回的域名,然后我們又希望可以使用一些本地的小圖標之類的,我們可以在wxml中使用背景圖,直接在view的style中寫樣式

  例如:

3、在頁面中直接使用image標簽,然后使用絕對定位


免責聲明!

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



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