【小程序】image组件的13种模式

【小程序】笔记内容声明及汇总

---

在实际项目中，经常要面对原始图片的尺寸和设计图里的尺寸不一样的情况（尤其是原始图片高宽是未知和不固定的情况，比如动态从网络获取图片）。在这种情况下，我们必须要有所舍弃，或放弃等比例，或裁剪掉图片的一部分。接受不完美，也是编程中很重要的心态，如何选择，需要看业务上的需求。

小程序的 image 组件提供了 4 种缩放模式、9 种裁剪模式，共计 13 种模式，来支持我们的选择。

接下来我们以官网的图对这些模式做简单的说明和演示，先看下官网原图：

原图 400 x 300 pixels

4 种缩放模式

• scaleToFill （默认值） 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
• aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  意思就是说，将图片缩放到刚好能居中放入 image 中，此时 image 可以有空白部分。
• aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 宽度不变，高度自动变化，保持原图宽高比不变。
  意思就是以 image 的宽为准，将原图按比例缩放至正好能放入 image 中，此时image 的高度就是缩放后的图片高度，也就是说 image 不会有多余空白部分。

举个栗子，这里我使用上面的原图，做了简单的验证，代码如下：

/// wxml 布局
<view>
    <image src="{{image}}" />
    <image mode="scaleToFill" src="{{image}}" />
    <image mode="aspectFit" src="{{image}}" />
</view>

<view>
    <image mode="aspectFill" src="{{image}}" />
    <image mode="widthFix" src="{{image}}" />
</view>

/// wxss 样式
view {
    display: flex;
    flex-direction: row;
    background-color: #000;
    width: 400px;
    height: 150px;
    margin-top: 1px;
}

view image {
    width: 133px;
    height: 133px;
    margin-left: 1px;
    background-color: #f00;
}

最后的运行效果就是这样的：

4 种缩放模式

9 种裁剪模式（只裁剪不缩放）

• top 显示图片的顶部区域。
• bottom 显示图片的底部区域。
• center 显示图片的中间区域。
• left 显示图片的左边区域。
• right 显示图片的右边区域。
• top left 显示图片的左上边区域。
• top right 显示图片的右上边区域。
• bottom left 显示图片的左下边区域。
• bottom right 显示图片的右下边区域。

这几种裁剪模式还是很好理解的，比如假设下面每个黄色框表示一个 image 组件，当 mode 依次等于这 9 种裁剪模式时，显示的效果就是每个黄框的内容：

9种裁剪模式效果

又到了举栗子环节，我这里对前面的代码简单改了下：

/// wxml 布局
<view>
    <image mode="top left" src="{{image}}" />
    <image mode="top" src="{{image}}" />
    <image mode="top right" src="{{image}}" />
</view>

<view>
    <image mode="left" src="{{image}}" />
    <image mode="center" src="{{image}}" />
    <image mode="right" src="{{image}}" />
</view>

<view>
    <image mode="bottom left" src="{{image}}" />
    <image mode="bottom" src="{{image}}" />
    <image mode="bottom right" src="{{image}}" />
</view>

/// wxss 样式
view {
    display: flex;
    flex-direction: row;
    background-color: #000;
    width: 400px;
    height: 100px;
    margin-top: 1px;
}

view image {
    width: 133px;
    height: 100px;
    margin-left: 1px;
    background-color: #f00;
}

效果如下：

9 种裁剪模式效果

小结

1. 4 种缩放模式，带有 Fill 的会填满 image，widthFix 会重新调整 image 的高度。
2. image 的默认模式是 scaleToFill。
3. image 组件默认大小是 300px * 225px，建议自己设置大小。
4. image 组件中二维码/小程序码图片不支持长按识别，仅在 wx.previewImage 中支持长按识别。