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

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

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

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

打印的event对象属性： wxml代码：