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

作者: IT实战联盟Lin | 来源:发表于2017-10-12 17:15 被阅读292次

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

3.pic.jpg

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

.img{
 
　　width: 100%;

}

添加属性 mode="widthFix"

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

效果如下图所示：

image.png

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

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

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

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

网友评论

IT实战联盟Lin:更多实战内容请关注公众号“IT实战联盟”~ IT实战联盟是集产品、UI设计、前后端、架构、大数据和AI人工智能为一体的实战交流服务平台！联盟嘉宾都为各互联网IT公司项目的核心成员，欢迎来撩~~~
IT实战联盟Lin:更多实战内容请关注公众号“IT实战联盟”~
e0b2a03cb102:可以的，希望作者再接再厉
IT实战联盟Lin:@晴天大神谢谢支持

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

本文链接：https://www.haomeiwen.com/subject/iejoyxtx.html

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