微信小程序 图片宽高自适应详解


Posted in Javascript onMay 11, 2017

微信小程序 图片宽高自适应

1.以前将小程序图片宽度设置为屏幕宽度:

imageLoad: function () {
   this.setData({
     imageWidth: wx.getSystemInfoSync().windowWidth
   })
 }

2.现在:

.imgClass{
 width: 100vw;
}

解析:

CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小

”vw”=”view width”“vh”=”view height”

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。

参照demo案例对照下面四个容器的css样式:

.demo {
  width: 100vw;
  font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口的10% */
}
.demo1 {
  width: 80vw;
  font-size: 8vw; /* 宽度为窗口80%, 字体大小为窗口的8% */
}
.demo2 {
  width: 50vw;
  font-size: 5vw; /* 宽度为窗口50%, 字体大小为窗口的5% */
}
.demo3 {
  width: 10vw;
  height: 50vh; /* 宽度为窗口10%, 容器高度为窗口的50% */
}

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
微信小程序中使用javascript 回调函数
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 #Javascript
You might like
处理单名多值表单的详解
2013/06/08 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
javascript基础知识
2016/06/07 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python中按键来获取指定的值
2019/03/02 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Java语言的优势
2015/01/10 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
自主招生自荐信范文
2013/12/04 职场文书
新郎新娘答谢词
2015/01/04 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
监守自盗观后感
2015/06/10 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js