微信小程序中图片等比例显示

当图片的长宽比例和显示的位置的长宽比例不一致时，图片显示会失真

设计时如果需要图片显示的height是固定的，width根据图片自身比例自适应，则image需要加上mode="heightFix"，该image的class只设置height，不设置width

index.wxml

	<image src="/image/test.png" mode="heightFix" class="showImg"></image>

index.wxss 

 .showImg
  {
    height:40%;
    margin-left:5%;
    margin-top:2%;
    border-radius:10rpx;
  }

设计时如果需要图片显示的width是固定的，height根据图片自身比例自适应，则image需要加上mode="widthFix"，该image的class只设置width，不设置height

index.wxml

	<image src="/image/test.png" mode="widthFix" class="showImg"></image>

index.wxss 

 .showImg
  {
    width:40%;
    margin-left:5%;
    margin-top:2%;
    border-radius:10rpx;
  }