微信小程式把玩(二十八)image元件
阿新 • • 發佈:2019-01-05
image元件也是一個程式不可缺少的,可以這樣說一個app中image元件隨處可以看到,一般 image有兩種載入方式第一種是網路圖片第二種是本地圖片資源,都用src屬性去指定。
重點屬性:
三種縮放模式
九種剪下方式
wxml
<!--3中是縮放模式
scaleToFill 不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿image元素
aspectFit 保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。
aspectFill 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來
-->
<view>aspectFit 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來</view>
<image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/>
<!--9種是裁剪模式
top 不縮放圖片,只顯示圖片的頂部區域
bottom,同上
left
right
top right
top left
bottom right
bottom left
-->
<view>bottom 不縮放圖片,只顯示圖片的底部區域</view >
<image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/>
<view>left 不縮放圖片,只顯示圖片的左邊區域</view>
<image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/>
<view>top right 不縮放圖片,只顯示圖片的右上邊區域</view>
<image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>