微信小程序 - image 宽高自适应(图片无法自适应撑开标签)

• 微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的。

• image 标签有 src、mode 等属性基本够用

• 但是今天在用的时候发现设置 src 之后，image 在小程序中是默认有宽高的，也就是固定的，去掉宽高之后，也不会像 html 中的 img 标签一样图片内容会撑开标签，这里就需要自己来根据图片的大小进行手动自适应图片宽高了。

• 使用 bindload 绑定函数动态自适应，我们可以获取到原图的宽度和高度，计算他们的宽高比率，然后设置一个宽度大小（rpx），最后通过 style 动态设置 image 的宽高。

• 代码如下:

  • .wxml

    <image src="./temp.png" style="{{imgStyle}}" bindload="imageLoadSuccess"></image>
    

  • .js

  微信小程序 - 设备信息与版本更新 这个文章中有动态 pixelRatio 的计算获取。

  // 设备像素比可以放到 app 中作为全局属性使用
  const app = getApp()
  
  Page({
    data: {
      // 默认图片没有宽高(你可以默认有宽高)
      imgStyle: 'width: 0rpx; height: 0rpx;'
      // 设备像素比，如果不知道获取像素比的可以看看上面那篇文章
      pixelRatio: 2
    },
    // 图片加载完成回调
    imageLoadSuccess (e) {
      // 获取图片信息
      const imgDetail = e.detail
      // 手动设置图片样式宽高
      this.setData({
        // 图片原始宽高度 * pixelRatio
        imgStyle: `width: ${imgDetail.width * this.data.pixelRatio}rpx; height: ${imgDetail.height * this.data.pixelRatio}rpx;`
      })
    }
  })
  

• 效果比较

  • 上面动态设置宽高之后效果：

  

  • 原始效果：

    <image src="./temp.png"></image>
    

  

  • 上面动态设置宽高之后效果，同样还可以配合 mode 进行使用

  下面这个图宽高都是有最大范围，当超过最大范围值需要显示图片中间部分，默认是填充撑满的，就需要 image 的 mode 配合：

  

  <image style="{{imgStyle}}" mode="aspectFill" bindload="imageLoadSuccess" src="./temp.png"></image>