<image class='sizeModal-img' src=' {{selected.image || spec.productFirstImage}}'></image>

image容器mode属性来控制图片的缩放和裁切方式

以下是微信小程序图片控件的属性说明
属性名 类型 默认值 说明 最低版本
src String   图片资源地址  
mode String 'scaleToFill' 图片裁剪、缩放的模式  
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效 1.5.0
binderror HandleEvent   当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}  
bindload HandleEvent   当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

 

 

 

 

 

注:image组件默认宽度300px、高度225px

模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变

--------------------------
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域
---------------------

没有坚守就没有事业,没有执着就没有未来!