小程序中保持图片不变形并且铺满盒子

效果图:

解释:

假如  直接设置img  长宽100%;会出现图片变形

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

            

 这里就要用到 image属性 mode:

 <view class='item-l' style='500rpx;height:500rpx;background:#ccc'>
       <image style="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