小程序图片高度自适应_小程序图片高度自动

页面需要显示长图片（超过一屏），本来以为像以前一样给其父级的盒子不给高度就行了，结果并不是想象中的那样，根本不起作用！！！
这是一个坑，关键在于image标签的一个属性：mode=“widthFix”

原来的写法

<view class="header-panel">
  <image src="../../image/header-img.jpeg" class="header" mode="widthFix"></image>
</view>
.header-panel {
  width: 750rpx;
}
.header-panel > .header {
  width: 100%;
  height: 100%;
}
1
2
3
4
5
6
7
8
9
10

修正之后

<image src="{{item.cover}}" class='header' mode="widthFix" />
// widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
// 这样页面会随着图片的高度变化而变化，会将页面自动撑开。
1
2
3