图片展示方法总结

展示图片的方法一般有两种：

1.css 通过background属性加载图片（适用于本地图片）；

.img {

width: 100px;

height: 100px;

background: url('./test.png');

background-size: 100%;

}

html片段： 

<div class="img"></div>

微信小程序wxml片段：<view class="img"></view>

2.专用图片标签展示（适用于本地、线上）；

h5: <img src="./test.png"></img>

微信小程序：<image src="./test.png" />

PS:

1. css方法：

h5和微信小程序如果不设置高度，图片不显示；如果只设置高度，宽度按100%显示。

2.专用标签:

• h5，不做宽高设置，默认显示图片的原始宽高，若只设置宽度，高度自适应；若只设置高度，展示图片原始宽高；
• 微信小程序: 

若不设置图片宽高，默认按mode="scaleToFill"处理，图片会填充整个image默认宽高；

若只设置宽度/高度，默认mode值不改变，高度/宽度为image默认高度/宽度；

若要保持宽度不变、高度自适应，则应给定一个宽度值并将mode值改为‘widthFix’；