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

更新时间：2017年05月11日 14:55:20 投稿：lqh

这篇文章主要介绍了微信小程序图片宽高自适应的相关资料,需要的朋友可以参考下

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

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

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

您可能感兴趣的文章:

微信小程序（三）tabBar底部导航详细介绍
这篇文章主要介绍了微信小程序（三）tabBar底部导航详细介绍的相关资料,需要的朋友可以参考下
2016-09-09
JavaScript this指向绑定方式及不适用情况详解
这篇文章主要为大家介绍了JavaScript this指向绑定方式及不适用情况详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JavaScript两张图搞懂原型链
这篇文章主要分享JavaScript的两张原型链图，我们上一篇文章介绍了JavaScript中的原型，为什么不将原型链一起介绍了呢？因为JavaScript中的原型链是一个难点，也是一个面试必问的考点，现在就来学习一下具体内容吧
2021-12-12
在博客园博文中添加自定义右键菜单的方法详解
本文是DOM鼠标事件的一个实际应用。查看博客园的博客文章时，有的文章非常长，却没有回到顶部按钮；而且文章的点赞和评论都在文章最底部，使用时并不方便。所以使用自定义右键菜单来实现回到顶部、点赞、评论这三个主要功能,需要的朋友可以参考下
2020-02-02
微信小程序 icon组件详细及实例代码
这篇文章主要介绍了微信小程序 icon组件详细及实例代码的相关资料,需要的朋友可以参考下
2016-10-10
微信小程序组件 contact-button（客服会话按钮）详解及实例代码
这篇文章主要介绍了微信小程序组件 contact-button（客服会话按钮）详解及实例代码的相关资料,需要的朋友可以参考下
2017-01-01
高级前端必会的package.json字段知识详解
这篇文章主要为大家介绍了高级前端必会的package.json字段知识详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JavaScript生成器函数Generator Functions优缺点特性详解
这篇文章主要为大家介绍了JavaScript生成器函数Generator Functions的特性及优点详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
微信小程序限制1M的瘦身技巧与方法详解
这篇文章主要介绍了微信小程序瘦身技巧与方法详解的相关资料,现在微信小程序提交代码只有1M大小的限制，这就对开发者提出难题了，这里提供了相关方法技巧，需要的朋友可以参考下
2017-01-01
JavaScript立即执行函数用法解析
这篇文章主要介绍了JavaScript立即执行函数,我们知道，在一般情况下，函数必须先调用才能执行，如下所示，我们定义了一个函数，并且调用,下面一起进入文章来接具体的使用方法吧
2021-12-12