微信小程序让图片高度自适应的方法

html代码中，图片高度如果设置为auto，则在不被其他属性替代的情况下，图片高度会自适应。但到了微信小程序上，这一招就不行了。如果你设置为height:auto，会发现根本没用。这个时候，要怎样设置呢？


 

图片高度自适应的方法

1、样式设置宽度100%，

.img{
　　width: 100%;
}

2、给图片标签添加属性 mode="widthFix"

参考源码如下：

<image class="img" src="../static/images/product-1.jpg" mode="widthFix">

这样，我们就实现了微信小程序图片高度自适应。
 

附注：mode 的合法值

图片不仅可以高度自适应，也可以宽度自适应、上下展示全部等等，但具体做法与css有所不同，可查看下方合法值参数。

scaleToFill     
缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素  

aspectFit
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill  
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。  

widthFix    
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变  

heightFix   
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

top 
裁剪模式，不缩放图片，只显示图片的顶部区域   

bottom  
裁剪模式，不缩放图片，只显示图片的底部区域   

center  
裁剪模式，不缩放图片，只显示图片的中间区域   

left    
裁剪模式，不缩放图片，只显示图片的左边区域   

right   
裁剪模式，不缩放图片，只显示图片的右边区域   

top left    
裁剪模式，不缩放图片，只显示图片的左上边区域  

top right   
裁剪模式，不缩放图片，只显示图片的右上边区域  

bottom left 
裁剪模式，不缩放图片，只显示图片的左下边区域  

bottom right    
裁剪模式，不缩放图片，只显示图片的右下边区域