1.通过动态设置image宽度和高度来实现:首先，小图标的初始宽度和高度用数据中的变量表示，并绑定到image component。small程序image component webp属性webp是imagecomponent的布尔属性，当这个属性打开时，意味着url可以以webp的形式设置图片，image使用模式“widthFix”(宽度不变，高度自动变化，原始图像的纵横比保持不变)，记得在css中加入height:auto，可以消除渲染拉伸变形路过的bug。
1、小 程序大图片缺少右边线Small 程序大图缺少右线的解决方法:使用2折图进行适配。1.通过动态设置image宽度和高度来实现:首先，小图标的初始宽度和高度用数据中的变量表示，并绑定到image component。2.通过wx.getSystemInfo得到手机可用的窗口宽度，所以小图标原来的宽度是*屏幕宽度/设计宽度，原来的长度是*屏幕宽度/设计宽度，然后用this.setData()修改变量。
2、小 程序进入页面图片渲染会拉伸闪下变形优化.md有些从界面传过来的图片没有固定的比例，全部渲染显示在页面上，会导致一个由大到小，快速向下闪烁的bug，极大的影响用户体验。image使用模式“widthFix”(宽度不变，高度自动变化，原始图像的纵横比保持不变)。记得在css中加入height:auto，可以消除渲染拉伸变形路过的bug。
3、实现小 程序 image图片宽度100%高度自适应因为微信上的图片程序有默认的宽度和高度:宽度:320px，高度:240px，只设置100%的宽度是无效的。因为默认的图片高度是240px，所以只需要添加属性ModeWidthFix就可以将宽度设置为100%，。img {宽度:100%；}这样画面宽度可以100%高度自适应，画面不会拉伸。
4、小 程序 image组件webp属性webp是image组件的布尔属性。当此属性打开时，意味着url可以设置webp格式的图片，image默认情况下，不解析webP格式，仅支持网络资源。据科技博客报道，YouTube上的视频缩略图采用webp格式后，网页的加载速度提高了1/10，谷歌的Chrome在线应用商店在应用这种格式后，每天节省了几TB的带宽。
