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


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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
Element中Slider滑块的具体使用
Jul 29 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
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php简单分页类实现方法
2015/02/26 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
php session_decode函数用法讲解
2019/05/26 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
培训心得体会
2013/12/29 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
个人求职自荐信范文
2014/06/20 职场文书
保险公司开门红口号
2014/06/21 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
学前班语言教学计划
2015/01/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书