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


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 相关文章推荐
区分JS中的undefined,null,"",0和false
Mar 08 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
js实现动态显示时间效果
Mar 06 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
原生js实现随机点名
2020/07/05 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python字符串排序方法
2014/08/29 Python
PyCharm代码格式调整方法
2018/05/23 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
医院院务公开实施方案
2014/05/03 职场文书
党课培训心得体会
2014/09/02 职场文书
员工给公司的建议书
2019/06/24 职场文书
Redis 异步机制
2022/05/15 Redis