微信小程序图片自适应大小（炒鸡详细）

开发小程序图片是非常重要的部分

小程序开发想要提升用户的体验感图片是必不可少的部分，因此对图片的各种操作也是咱不可或缺的技能。

我遇到的坑

本来想放入一张好看的图片

<view class="one">
    <image src="/images/1.png" ></image>
</view>

原图

结果

因为我没有设置图像的宽高，然后系统就使用了image的默认宽高

  height: 240px;
  width: 320px;

解决方法一

既然我们不设置宽高系统就会使用默认值，那我们就自己设置一个宽高

<image src="/images/1.png" class="image"></image>

.image{
  width: 300px;
  height: 600px;
}

好像是解决了我们的问题了，可以过程非常麻烦，而且设置的宽高比例和图片的宽高比不等的话就会引起图片变形，非常不美观！
作为有追求的程序猿我们绝不能苟且。

解决方法二

我们的小程序里有可能会有很多张图片，如果每个都要想办法获得其宽高比相比非常浪费时间，
这时候我们就要用到 image里的mode属性。

本篇只聊自适应宽高的问题，其他图片操作请访问微信开发者文档

咳咳，言归正传我们回到自适应宽高的问题上

既然我们不好获得宽高比，那么我干脆让系统去解决这个问题

自适应高度

 <image src="/images/1.png" style="width:200px" mode="widthFix"></image>

我们只需要设置图片的宽度，然后系统就会按照我们图片的宽高比设置图片高度

同理

自适应宽度

 <image src="/images/1.png" style="height:500px" mode="heightFix"></image>

这样就能比较完美的解决我们的问题啦

结局方法三

使用bindload方法，当图片载入完毕时触发，event.detail = {height, width} 。

 <image src="/images/1.png" style="width:{{width}}px;height:{{height}}px" bindload="load"></image>

  load:function(e){
      this.setData({
        height:e.detail.height,
        width:e.detail.width
      })
      console.log(this.data.height)
      console.log(this.data.width)
  }

得到了图片自带的宽高我们就可以为所欲为了hhhh