一、介绍
微信小程序是一种新型的开发方式，提供一种较为轻量且开发速度较快的开发方式，而其中的图片显示时经常会面临着适应不良的问题，而imagemode则成为了解决这个问题的一个关键。imagemode是图片显示时的一些模式选择，掌握这些模式可以让页面展示效果更加完美。
二、imagemode的四种模式
1. aspectFill
这是最常用的一种模式。当图片比图片显示区域大时，将图片按照比例放大直至完全覆盖整个显示区域；当图片比图片显示区域小时，将图片按照比例放大到覆盖整个显示区域。
<image src="{{imageSrc}}" mode="aspectFill" />
2. aspectFit
这也是一种比较常用的模式。当图片比图片显示区域大时，将图片按照比例缩小到完全适应整个显示区域；当图片比图片显示区域小时，将图片按照比例放大到适应整个显示区域。
<image src="{{imageSrc}}" mode="aspectFit" />
3. widthFix
这种模式适合那些需要宽度固定的图片。在这种模式下，图片的大小将自动缩放，以适应显示区域的宽度，但是图片的高度仍然与原图相同。
<image src="{{imageSrc}}" mode="widthFix" />
4. heightFix
这种模式适合那些需要高度固定的图片。在这种模式下，图片的大小将自动缩放，以适应显示区域的高度，但是图片的宽度仍然与原图相同。
<image src="{{imageSrc}}" mode="heightFix" />
三、实例
下面来看具体的效果对比：
<view class="flex">
<image src="{{imageSrc}}" mode="aspectFill" class="img fed" />
<image src="{{imageSrc}}" mode="aspectFit" class="img fed" />
</view>
<view class="flex">
<image src="{{imageSrc}}" mode="widthFix" class="img lay" />
<image src="{{imageSrc}}" mode="heightFix" class="img lay" />
</view>
其中加粗字体代表该属性生效
效果如下：
四、总结
在实际开发中，imagemode是处理微信小程序中图片显示调整的常用手段，同时结合flexbox等布局也可以让图片显示得更加美观。在使用imagemode的时候，应该根据实际情况选择合适的模式。
