小程序中保持圖片不變形並且鋪滿盒子

 

 

效果圖:

 

 

解釋:

假如  直接設置img  長寬100%;會出現圖片變形

<view class='item-l' style='width:500rpx;height:500rpx;background:#ccc'>
     <image style="width:100%;height:100%" src='/img/test.png'></image>
</view>

 

            

 

 

 這里就要用到 image屬性 mode:

 

 <view class='item-l' style='width:500rpx;height:500rpx;background:#ccc'>
       <image style="width:100%;height:100%" mode='aspectFill' src='/img/test.png'></image>
 </view>

微信開發文檔鏈接:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

 

 

 peace & love   有問題call me