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