小程序图片设置宽高的方法

1. image组件默认宽度300px、高度225px  ；

2.css设置宽高（尺寸最好为rpx，更适应屏幕）

3.mode 设置缩放模式（13种）

样式设置宽度100%   添加属性 mode="widthFix"

4.套在div种，设置div宽高，

下图可以看出：在做一个展示聊天消息的组件时，由于“组件高度”依赖于聊天内容，所以导致没有显式指定组件高度的情况下出现内容层叠问题。

在Component的ready中计算组件的实际高度然后通过setData()来设置即可。

wxml：

js:

解释：

通过“#msg-content”获取内容视图的node，并通过node.boundingClientRect()来获取内容视图的尺寸，并加上其他的固定部分的高度最终计算出组件的高度。

单位统一使用rpx。

结果如下所示：

由于不同设备高度不同，所以box部分的高度需要是动态的；

有两种处理方式:

可以看到预览完全没问题，接下来往里面放一个滚动视图scroll-view，设置为可以垂直滚动，高度设置为100%样式

我发现一个tip，其实只要给外围的box一个高度即可，随便一个高度，因为设置了flex拉伸级别，这个高度不影响拉伸；在H5中是没意义的，但是这里可以解决问题；

---