1. 背景
在微信小程序开发中，图片的展示是必不可少的。但是，如何让图片在不同的设备上显示效果一致，且宽度能够自适应，是一个需要解决的问题。
2. 常见问题
在微信小程序开发中，常见的图片展示问题有以下几种：
2.1 图片显示变形
当图片的宽度超过容器的宽度时，就会出现图片缩放变形的问题，影响用户体验。
2.2 图片过大
如果使用固定宽度或高度来设置图片，会导致图片缩放变形、过大或过小的问题，而且不同的设备上显示效果差异较大。
2.3 多张图片展示排版问题
多张图片展示时，如何排版美观，是需要考虑的问题。
3. 解决方案
为了解决以上问题，可以使用微信小程序提供的一些特性，实现图片宽度自适应的效果。
3.1 使用 wx.getImageInfo() 获取图片信息
在显示图片之前，最好先获取图片的信息，包括宽度和高度。这里我们使用 wx.getImageInfo() 方法来获取图片信息。
wx.getImageInfo({
src: '图片路径',
success: function (res) {
console.log(res.width)
console.log(res.height)
}
})
使用 wx.getImageInfo() 获取到图片的宽度和高度之后，我们可以根据实际情况来确定图片展示的宽度。例如，我们可以将图片的宽度设置为屏幕宽度的一半。
3.2 使用系统信息获取屏幕宽度
在小程序中，我们可以使用 wx.getSystemInfo() 方法获取设备的信息，包括屏幕宽度、高度等。
wx.getSystemInfo({
success: function(res) {
console.log(res.windowWidth)
console.log(res.windowHeight)
}
})
根据获取到的屏幕宽度，我们可以计算出图片展示的宽度。例如，我们可以将图片的宽度设置为屏幕宽度的一半。
3.3 使用 image 标签展示图片
在小程序中，我们可以使用 image 标签来展示图片，并在标签中设置 width 属性来控制图片的宽度。
<image src="图片路径" style="width:50%"></image>3.4 设置图片样式
为了实现更好的展示效果，我们可以设置图片的样式，包括图片的圆角、边框等。
image {
border-radius: 10px;
border: 2px solid #ccc;
}
3.5 多张图片排版
当展示多张图片时，我们需要对图片进行排版，最好使用 flex 布局来实现。这样可以确保不同大小的图片自适应，并且排版美观。
<view class="image-group">
<image class="image-item" src="图片路径"></image>
<image class="image-item" src="图片路径"></image>
<image class="image-item" src="图片路径"></image>
</view>
.image-group {
display: flex;
justify-content: space-between;
}
.image-item {
width: 30%;
border-radius: 10px;
border: 2px solid #ccc;
}
4. 总结
在微信小程序中，图片宽度自适应是一个需要注意的问题。我们可以使用 wx.getImageInfo() 获取图片宽度和高度，使用 wx.getSystemInfo() 获取屏幕宽度，使用 image 标签和样式来展示图片，使用 flex 布局来排版多张图片。通过这些方法，可以实现图片宽度自适应，使得不同的设备上展示效果一致，并且美观。