欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2022-11-20 10:14:03|栏目:JavaScript代码|点击:

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

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% */
}

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

上一篇:js控制input输入字符解析

栏    目:JavaScript代码

下一篇:没有了

本文标题:微信小程序 图片宽高自适应详解

本文地址:http://www.codeinn.net/misctech/219477.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有