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

更新时间：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% */
}

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

您可能感兴趣的文章:

微信小程序 swiper制作tab切换实现附源码
这篇文章主要介绍了微信小程序 swiper制作tab切换实现代码的相关资料,需要的朋友可以参考下
2017-01-01
Intersection Observer交叉观察器示例解析
这篇文章主要为大家介绍了Intersection Observer交叉观察器示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
js二进制数据及其互相转化实现详解
这篇文章主要为大家介绍了js二进制数据及其互相转化实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
TypeScript栈的压入与弹出序列校验
这篇文章主要为大家介绍了TypeScript栈的压入与弹出序列校验示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
漂亮的仿flash菜单，来自蓝色经典
漂亮的仿flash菜单，来自蓝色经典...
2006-06-06
javascript对象3个属性特征
这篇文章主要介绍了javascript对象3个属性特征，writable可写、enumerable可枚举、configurable可配置，下面来看看文章的详细内容吧
2021-11-11
利用javaScript处理常用事件详解
这篇文章主要介绍了利用javaScript处理常用事件详解,文章有非常详细的代码实践,对学习js的小伙伴们有一定的参考价值,需要的朋友可以参考下
2021-04-04
Preload基础使用方法详解
preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗
2020-02-02
微信小程序 devtool隐藏的秘密
这篇文章主要介绍了微信小程序 devtool隐藏的秘密的相关资料,需要的朋友可以参考下
2017-01-01
微信小程序限制1M的瘦身技巧与方法详解
这篇文章主要介绍了微信小程序瘦身技巧与方法详解的相关资料,现在微信小程序提交代码只有1M大小的限制，这就对开发者提出难题了，这里提供了相关方法技巧，需要的朋友可以参考下
2017-01-01