微信小程序——image图片组件宽高自适应方法（可详细了！）

前言：
第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻，猜疑是哪给图片默认设置了图片高度，后来使用调试器选中图片元素查看了下原因，果不其然，小程序给image组件默认设置了以下样式：

image {
	width: 320px;
	height: 240px;
	display: inline-block;
	overflow: hidden;
}

因此导致我只给图片设置了width，但是高度还是使用了默认的240px的值，但是我又不想给图片固定高度，因为固定后，后期如果设计突然要修改图片尺寸的话，还得修改小程序代码样式，然后再发包，这种Low的事情绝不是一个优秀与帅气并存的前端高级开发人员做的事~（啪！谁打的），然后我就去查了下官方API，在image组件上有一个mode属性，这个属性的功能是设置图片裁剪、缩放的模式，默认值为scaleToFill（缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素），mode有很多可选参数，如下：

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

解决方案1：
咔咔一顿读和理解，最终确定widthFix缩放模式可以达到朕想要的效果，所以给image添加mode=“widthFix”，效果甚是完美

<image mode="widthFix" src=""></image>

image{
	width: 100%;
}

解决方案2：
image组件中还有一个bindload属性，该属性的作用是当图片加载完成以后会触发所设置的回调函数，函数有一个event参数，在event中有原图片的width和height值，可以获取到以后再设置给image的style中,代码如下：

打印的event对象属性：

wxml代码：

<image src="" bindload="imgInfo" style="width: {{imgWidth}}px; height: {{imgHeight}}px;"></image>

js代码：

Page({
  data: {
	  imgWidth:"",
	  imgHeight:""
  },
  imgInfo:function(event){
	  this.setData({
		  imgWidth:event.detail.width,
		  imgHeight:event.detail.height
	  })
  }
})

总结：

• 解决方案1：小程序自带的方法，更简单方便，也提供了其他的图片裁剪方法，可自行根据需求选择，基本都能满足（推荐）
• 解决方案2：需要自己写js代码进行获取，如果要做不同大小分辨的自适应的话，还需要自己计算最终图片的宽高数值，但是此方法会更灵活，自己可以根据项目需求进行自定义。

小程序为了方便开发人员，将很多标签都封装成了组件，并给组件添加了一些常用的方法和属性，同时也可能会添加一些默认的样式，会Vue或者react的应该都能够理解组件的意义，所以使用这种别人做好的框架就得熟悉这套框架的规则，不熟悉游戏规则，如何才能超神~

↓下方求个赞~感谢客官