微信小程序-Image 图片实现宽度100%，高度自适应

大家好，今天在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然，如下图所示：

3.pic.jpg

大家发现是不是比较模糊并且有压缩，不能达到预期效果。
解决方法如下：
样式设置宽度100%

.img{
 
　　width: 100%;

}

添加属性 mode="widthFix"

<image class="img" src="../../images/hello.png" mode="widthFix">

效果如下图所示：

image.png image.png

是不是效果非常明显呢？赶紧试试吧！

关注我们

IT实战联盟 全新打造的“微信小程序微商城系列”都是通过https 动态获取数据并展示，更加贴近于实际工作场景，建议从第一篇开始阅读。

微信小程序微商城（一）：https框架搭建并实现导航功能

大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

微信小程序-Image 图片实现宽度100%，高度自适应