微信小程序圖片寬100%顯示并且不變形
更新時(shí)間：2017年06月21日 11:21:20 投稿：lqh
這篇文章主要介紹了微信小程序圖片寬100%顯示并且不變形的相關(guān)資料,需要的朋友可以參考下
微信小程序圖片寬100%顯示并且不變形
按照HTML習(xí)慣進(jìn)行寫，代碼：
<view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view>
效果如下：
很明顯變形了
找到一篇關(guān)于微信小程序 圖片的信息
http://www.fzitv.net/article/116771.htm
在圖片上加上 mode=”widthFix”
代碼如下：
<view class="meiti" style="background-color:red;">
<image src="http://10.0.0.171:9001/images/2017/0619/20170619110943813_progressive.jpg"
mode="widthFix"
style="width:100%;background-color:black;" ></image>
</view>
效果：
這樣就能達(dá)到我們的要求了，等比例縮放。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了JS中疑惑的數(shù)據(jù)類型及類型判斷方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
可輸入的下拉框...2006-06-06
這篇文章主要介紹了微信小程序 開發(fā)經(jīng)驗(yàn)整理的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹如何用JS寫一個(gè)發(fā)布訂閱模式，什么是發(fā)布訂閱模式？能手寫實(shí)現(xiàn)一下嗎？它和觀察者模式有區(qū)別嗎？帶著疑惑一起解開下面文章的內(nèi)容吧2021-11-11
微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序 瘦身技巧與方法詳解的相關(guān)資料,現(xiàn)在微信小程序 提交代碼只有1M大小的限制，這就對(duì)開發(fā)者提出難題了，這里提供了相關(guān)方法技巧，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序switch組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解
這篇文章主要為大家介紹了Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本篇文章主要介紹了微信小程序之picker選擇器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
微信小程序之網(wǎng)絡(luò)請(qǐng)求簡(jiǎn)單封裝實(shí)例詳解
這篇文章主要介紹了微信小程序之網(wǎng)絡(luò)請(qǐng)求簡(jiǎn)單封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06