微信小程序 图片宽高自适应详解
来源:互联网 发布:淘宝搜店铺名搜不到 编辑:程序博客网 时间:2024/05/20 06:56
微信小程序 图片宽高自适应
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% */}
阅读全文
0 0
- 微信小程序 图片宽高自适应详解
- 微信小程序 图片宽高自适应
- 微信小程序 图片自适应
- JQUERY 图片自适应宽高
- css图片自适应高宽
- js图片自适应宽高
- Layout图片宽高自适应
- 让图片自适应高宽
- Android ImageView动态图片自适应宽高
- 图片预览自适应固定宽高div
- 图片整合+宽高自适应+盒模型
- 图片自适应div高宽并且垂直居中
- 等比例显示图片的大小,宽高自适应
- ImageView根据图片横竖自适应调整宽高
- jquery 简单设置图片自适应宽高(不完美)
- [CSS]图片无法自适应高宽bug排查过程
- js 在指定宽高元素中插入自适应图片
- 手机banner图片自适应手机宽高定位
- 建造者模式
- POJ A Round Peg in a Ground Hole <凸包判断以及点与多边形的相对位置>
- 正确使用 Volatile 变量
- 配置本地Gradle
- python3调用百度翻译接口样例
- 微信小程序 图片宽高自适应详解
- BaseRecyclerViewAdapterHelper简单使用
- 【Unity3D技术文档翻译】第1.6篇 使用 AssetBundle Manager
- java.lang.OutOfMemoryError: PermGen space
- Activity中isTaskRoot() 和moveTaskToBack()
- 小技巧(一) 标识位、List的巧妙添加
- jenkins git 报“Host key verification failed”错误处理
- android应用保活1
- Glide的基本使用