最近收到一个需求，就是优化图片显示。在滚动轮播图发现这种轮播效应不理想，经过排查发现客户上传的图片尺寸规格不统一。听取了客户的建议发现了还有一种比较好方式可以满足到需求。
1.图片适配常规做法
小程序里面image能够提供多种缩放的方式。其中设置模式 mode=‘widthFix’ 较为常用。这样子图片可以根据宽度适配，可以做到图片不变形。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
2.使用css样式适配常规做法
但是这种常规的做法，还是不能满足一些需求。于是后台会出现各种不规格的图片，前端苦苦地说明提供的尺寸必须规范，只可以客户就是不会遵循这样一个不明文的规则。后来经过项目发现 小程序里面使用css 即可达到满足这样的需求。只要固定在可视的范围内，这样图片就可以进行一个有效的缩放。
于是我们就不能采用image 设置mode=‘widthFix’ 实现这种需求。相应地，改成 另外一种方法。
改成了background的方法嵌入背景图片来实现。
<view class="cimg" style="background:url({{image_url}}) no-repeat center center;background-size: contain">
实际上我们也可以尝试background-size: cover 达到我们使用的目的。经过这样处理。图片可以实现固定在宽高的框里面显示出来。
如果这种方式不够友好，不妨可以封装成一个组件，达到这样使用目的。
<we-img scr="{{image_url}}"></we-img>
