uniapp实现图片宽度100%、高度自适应的效果

uni-app实现图片宽度100%、高度自适应的效果，常规的css方法不行，默认给height:auto;就看不到图片了，要想实现自适应高度效果，首先给图片设置 mode="widthFix"

<view class="img-info">
  <image mode="widthFix" src="../../static/img/p10.jpg" />
  <image mode="widthFix" src="../../static/img/p10.jpg" />
  <image mode="widthFix" src="../../static/img/p10.jpg" />
  <image mode="widthFix" src="../../static/img/p10.jpg" />
</view>

样式中设置高度自适应 height:auto; 就可以了

.img-info {
  margin-top:20rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  image {
    width:320rpx;
    height:auto;
    margin-bottom: 20rpx;
  }
}

以上是一行两列的图片布局效果，宽度固定，高度自适应