微信小程序圖片寬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.dbjr.com.cn/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á)到我們的要求了，等比例縮放。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序 用戶數(shù)據(jù)解密詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序switch組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 canvas API詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了fabric.js圖層功能獨(dú)立顯隱?添加?刪除?預(yù)覽實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
理解js中原型、原型鏈這個(gè)概念，絕對是幫助我們更深入學(xué)習(xí)js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關(guān)鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義2021-09-09
微信小程序 新建登錄頁并實(shí)現(xiàn)tabBar隱藏
這篇文章主要介紹了微信小程序 新建登錄頁并實(shí)現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)雙向綁定與數(shù)據(jù)操作的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序 數(shù)組中的push與concat的區(qū)別
這篇文章主要介紹了微信小程序 數(shù)組中的push與concat的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 檢查接口狀態(tài)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06