微信小程序图片宽高自适应详解

背景

在微信小程序开发中，图片是重要的元素之一。然而，由于图片在不同设备上的宽度和高度不同，如何让图片自适应不同的设备变得十分重要。本攻略将详细讲解微信小程序中如何实现图片宽高自适应。

使用 wx.getImageInfo 获取图片信息

为了让图片自适应，在小程序中必须获取图片的信息，包括图片的宽度和高度。可以通过调用 wx.getImageInfo 方法来获取图片信息。具体代码如下：

wx.getImageInfo({
  src: 'url-to-image',
  success: (res) => {
    console.log(res.width)
    console.log(res.height)
  }
})

其中，src 参数指定了要获取信息的图片路径，success 回调函数会在获取成功时执行。在回调函数中，通过 res 参数可以获取到图片的宽度和高度。

使用 image 组件实现自适应

获取到图片的宽度和高度之后，就可以通过 image 组件来实现自适应了。具体代码如下：

<view style="width: 100%">
  <image src="url-to-image" mode="aspectFit" style="width:{{imageWidth}}px;height:{{imageHeight}}px;"></image>
</view>

其中，image 组件的 mode 属性指定了图片的展示方式，aspectFit 表示尽可能将图片缩小到它能够完整显示的最大尺寸。style 属性指定了图片的宽度和高度，其中的 {{imageWidth}} 和 {{imageHeight}} 是通过 JavaScript 计算出来的。

具体计算方式如下：

wx.getImageInfo({
  src: 'url-to-image',
  success: (res) => {
    const width = res.width
    const height = res.height
    const windowWidth = wx.getSystemInfoSync().windowWidth // 获取屏幕宽度

    const ratio = windowWidth / width // 获取屏幕宽度与图片宽度的比值

    this.setData({
      imageWidth: windowWidth,
      imageHeight: height * ratio // 按比值计算出图片高度
    })
  }
})

示例说明

示例一：固定高度的图片

如果图片的高度是固定的，而宽度需要自适应，可以通过设置 aspectFit 模式和固定高度来实现。具体代码如下：

<view style="width: 100%">
  <image src="url-to-image" mode="aspectFit" style="height: 200rpx;"></image>
</view>

在上面的代码中，图片的高度被固定为 200rpx，而宽度则由小程序自动计算得出。

示例二：整个页面都是图片

如果整个页面都是图片，可以通过设置 image 组件的 mode 属性为 widthFix 来实现自适应。具体代码如下：

<view style="width: 100%">
  <image src="url-to-image" mode="widthFix" style="width: 100%;"></image>
</view>

在上面的代码中，图片的 mode 属性被设置为 widthFix，这表示整张图片的宽度被设置为屏幕宽度。由于宽度被设置为 100%，因此整个页面都可以自适应。

结论

微信小程序中实现图片宽高自适应的方法在上文中已经详细的讲解了，而且也提供了两个实际案例。开发者们只要按照这个方法来实现，就可以很方便的实现图片宽高自适应了。