微信小程序中的 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>