一、使用mode: widthFix
widthFix: 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如700rpx
二、使用bindload绑定函数动态自适应
wxml
<view wx:for="{{list}}" wx:key="index"><image data-index="{{index}}" bindload="imageLoad" src="{{item.content}}" style="display: none;"></image><image style="width: {{image[index].width}}rpx;height: {{image[index].height}}rpx;" src="{{item.content}}" wx:if="{{image[index].width}}"></image></view>
js
Page({data: {list: [],image: {},},imageLoad(e) {let image = this.data.image,index = e.currentTarget.dataset.index,$width = e.detail.width,$height = e.detail.height,ratio = $width/$height,viewWidth = 360,viewHeight = 360/ratio;image[index] = {width: viewWidth,height: viewHeight,}this.setData({image: image})},})