网站开发中一般都会有banner区域，而对于banner区域的处理基本都是图片轮播，图片的尺寸根据浏览器进行自适应处理。

那么在微信小程序的开发中，我们是如何对图片进行自适应的处理呢？

<image src="url" class="imgClass" model="widthFix" bindload="imageLoad" />

1. 以前将小程序图片宽度设置为屏幕宽度：

imageLoad: function () {
     this.setData({
         imageWidth: wx.getSystemInfoSync().windowWidth
     })
 }

2.现在：

.imgClass{  width: 100vw;}/* 宽度为窗口100% */
<image src="url" class="imgClass" model="widthFix" />

代码片段解析：

css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小 

”vw”=”view width”“vh”=”view height” 

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 

model解析

model是微信小程序开发中图片裁剪、缩放的模式！

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

本处使用的是widthFix（既：宽度不变，高度自动变化，保持原图宽高比不变）

那么本例代码完整意思既是：用微信小程序model设置高度自适应，再用CSS3属性设置宽度为当前窗口的100%