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


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异步按一定的时间间隔刷新问题
Dec 10 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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获取文件名后缀
2013/06/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python之super的使用小结
2018/08/13 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python em算法的实现
2020/10/03 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
实习期自我鉴定
2013/10/11 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
运动会标语
2014/06/21 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
Python中的 Set 与 dict
2022/03/13 Python