微信小程序image组件mode属性详解

蒲公英10012025-02-17 8:56

今天学习微信小程序开发的image组件，mode属性的属性值不少，一开始有点整不明白。后来从网上下载了一张图片，把每个属性都试验了一番，总算明白了。现总结归纳如下：

1.使用scaleToFill。这是mode的默认值，scaleToFill会让图片变形，效果见下图，但是图片能完整显示。

html 复制代码

<image src="/images/luban.jpg" mode="scaleToFill" />

2.使用aspectFit属性值，实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来，图片完整显示，图片不变形。这里都是和默认值scaleToFill作对比。

3.使用aspectFill属性，实现image组件在保持图片宽高比不变的情况下，使图片短边能够完全显示出来，另一边不完整显示。这里可以看到，鲁班的头部没有显示完整，图片不变形。

复制代码

<image src="/images/luban.jpg" mode="aspectFill" />

4.使用widthFix属性，image组件保持图片宽高比不变的情况下，图片宽度不变，高度自动变化，图片完整显示。

复制代码

<image src="/images/luban.jpg" mode="widthFix" />

5.使用heightFix属性，image组件保持图片宽高比不变的情况下，图片高度不变，宽度自动变化。图片完整显示。高度定了，宽度由高度决定，也就是图片不变形，等比例变化。图片整体看上去比上一张图片4小。

复制代码

<image src="/images/luban.jpg" mode="heightFix" />

下面是mode取值为top、bottom、center、left、right等，我也逐一做了验证，这里没有什么不好理解的。以top和bottom left为例，效果图如下。

复制代码

<image src="/images/luban.jpg" mode="top" />

复制代码

<image src="/images/luban.jpg" mode="bottom right" />

都说实践出真知，感觉有一些懵懵懂懂，模糊不清的地方，自己动手实践一下，基本就会理解。