微信小程序图片宽100%显示并且不变形


Posted in Javascript onJune 21, 2017

微信小程序图片宽100%显示并且不变形

按照HTML习惯进行写,代码:

<view class="meiti">
   <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" 
   style="width:100%;"></image>
  </view>

效果如下:

微信小程序图片宽100%显示并且不变形

很明显变形了

找到一篇关于微信小程序 图片的信息

在图片上加上 mode=”widthFix”

代码如下:

<view class="meiti" style="background-color:red;">
   <image src="http://10.0.0.171:9001/images/2017/0619/20170619110943813_progressive.jpg"
    mode="widthFix" 
    style="width:100%;background-color:black;" ></image>
  </view>

效果:

微信小程序图片宽100%显示并且不变形

这样就能达到我们的要求了,等比例缩放。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
详解JavaScript函数
Dec 01 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
laydate时间日历插件使用方法详解
Nov 14 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 #Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 #Javascript
javascript+html5+css3自定义提示窗口
Jun 21 #Javascript
详解webpack分离css单独打包
Jun 21 #Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 #Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
You might like
php str_pad 函数使用详解
2009/01/13 PHP
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
对pandas中to_dict的用法详解
2018/06/05 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
ubuntu上安装python的实例方法
2019/09/30 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
英文翻译的自我评价语句
2013/10/04 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis