微信小程序圖片寬高自適應(yīng)詳解

更新時(shí)間：2017年05月11日 14:55:20 投稿：lqh

這篇文章主要介紹了微信小程序圖片寬高自適應(yīng)的相關(guān)資料,需要的朋友可以參考下

微信小程序圖片寬高自適應(yīng)

1.以前將小程序圖片寬度設(shè)置為屏幕寬度：

imageLoad: function () {
   this.setData({
     imageWidth: wx.getSystemInfoSync().windowWidth
   })
 }

2.現(xiàn)在：

.imgClass{
 width: 100vw;
}

解析：

CSS3引入的”vw”和”vh”基于寬度/高度相對(duì)于窗口大小

”vw”=”view width”“vh”=”view height”

以上我們稱為視窗單位允許我們更接近瀏覽器窗口來定義大小。

參照demo案例對(duì)照下面四個(gè)容器的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% */
}

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序（三）tabBar底部導(dǎo)航詳細(xì)介紹
這篇文章主要介紹了微信小程序（三）tabBar底部導(dǎo)航詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-09-09
JavaScript?this指向綁定方式及不適用情況詳解
這篇文章主要為大家介紹了JavaScript?this指向綁定方式及不適用情況詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
JavaScript兩張圖搞懂原型鏈
這篇文章主要分享JavaScript的兩張?jiān)玩湀D，我們上一篇文章介紹了JavaScript中的原型，為什么不將原型鏈一起介紹了呢？因?yàn)镴avaScript中的原型鏈?zhǔn)且粋€(gè)難點(diǎn)，也是一個(gè)面試必問的考點(diǎn)，現(xiàn)在就來學(xué)習(xí)一下具體內(nèi)容吧
2021-12-12
在博客園博文中添加自定義右鍵菜單的方法詳解
本文是DOM鼠標(biāo)事件的一個(gè)實(shí)際應(yīng)用。查看博客園的博客文章時(shí)，有的文章非常長(zhǎng)，卻沒有回到頂部按鈕；而且文章的點(diǎn)贊和評(píng)論都在文章最底部，使用時(shí)并不方便。所以使用自定義右鍵菜單來實(shí)現(xiàn)回到頂部、點(diǎn)贊、評(píng)論這三個(gè)主要功能,需要的朋友可以參考下
2020-02-02
微信小程序 icon組件詳細(xì)及實(shí)例代碼
這篇文章主要介紹了微信小程序 icon組件詳細(xì)及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01
高級(jí)前端必會(huì)的package.json字段知識(shí)詳解
這篇文章主要為大家介紹了高級(jí)前端必會(huì)的package.json字段知識(shí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript生成器函數(shù)Generator?Functions優(yōu)缺點(diǎn)特性詳解
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator?Functions的特性及優(yōu)點(diǎn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
微信小程序限制1M的瘦身技巧與方法詳解
這篇文章主要介紹了微信小程序瘦身技巧與方法詳解的相關(guān)資料,現(xiàn)在微信小程序提交代碼只有1M大小的限制，這就對(duì)開發(fā)者提出難題了，這里提供了相關(guān)方法技巧，需要的朋友可以參考下
2017-01-01
JavaScript立即執(zhí)行函數(shù)用法解析
這篇文章主要介紹了JavaScript立即執(zhí)行函數(shù),我們知道，在一般情況下，函數(shù)必須先調(diào)用才能執(zhí)行，如下所示，我們定義了一個(gè)函數(shù)，并且調(diào)用,下面一起進(jìn)入文章來接具體的使用方法吧
2021-12-12