微信小程序图片宽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 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
微信小程序中页面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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
django跳转页面传参的实现
2020/09/17 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
校运会入场式解说词
2014/02/10 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
运动会跳远加油稿
2014/02/20 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2014全年工作总结
2014/11/27 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
《叶问2》观后感
2015/06/15 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
《静夜思》教学反思
2016/02/17 职场文书
公司转让协议书
2016/03/19 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang