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

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

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

index.wxml

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

index.wxss 

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