微信小程序 Image 圖片實現(xiàn)寬度100%或設置成某個rpx的值例如520rpx野宜，高度自適應要如何設置呢扫步？
一般做法如下：
樣式設置寬度100%，
.img{
width: 100%;
}
在圖片組件上添加屬性 mode="widthFix"
<image class="img" src="../../images/hello.png" mode="widthFix">
即可實現(xiàn)匈子！
但是問題來了河胎，為什么我是這么做的，但虎敦，就游岳，TMD變形著顯示，或者截掉一截其徙，或者在mode設置成aspectFit的時候胚迫，甚至還自動給圖片加“高”了很多不協(xié)調的高呢？
注：設置圖片組件的mode = "aspectFit"可以保持縱橫比縮放圖片唾那，使圖片的長邊能完全顯示出來访锻。也就是說，可以完整地將圖片顯示出來闹获。
其實期犬，出現(xiàn)這個問題我們還得從源頭開始說起，微信小程序的image組件是有他的默認高度的避诽，mage組件默認寬度300px哭懈、高度225px，這個我們從控制臺可以看得出來茎用。
其中遣总，下面的image樣式即為微信的image圖片組件默認的寬度與高度睬罗，我們在做微信小程序開發(fā)時需要對默認的圖片樣式進行覆蓋，像上面我只設置了圖的寬度：
圖片組件
<image class="test_image" src="../../images/ai.png"></image>
樣式
.test_image{width:630rpx;}
因此旭斥，在控制臺就會出現(xiàn)上述的寬度被新樣式覆蓋而高度仍然是默認值的情況容达，那么我們如果加上mode特性的值呢？
<image class="test_image" mode="widthFix" src="../../images/ai.png"></image>
控制臺的顯示如下：
上面可以看到默認的image樣式的寬垂券、高均已成功被覆寫了花盐，同時我們可以發(fā)現(xiàn)，在組件的調試控制臺的源代碼顯示區(qū)的圖片組件上已經動態(tài)地加入了圖片高度菇爪，如下圖算芯。
至此，按道理說我們就已經成功地控制了高度凳宙，并成功自適應高度了熙揍，但最開始的異常情況又如何解釋呢？
這其實是因為mode的widthFix模式了氏涩，官方的說明如下：
widthFix 寬度不變届囚，高度自動變化，保持原圖寬高比不變
理論上是尖，無論什么情況下意系，寬高比都不應該變化的，圖片都應該正常的饺汹。但是蛔添，在widthFix實際進行自適應高度的時候是需要有參照物的，這個參照物便是父容器的剩余高度與空間兜辞，像我在項目中設置了父元素的高度為30%迎瞧，因此，當我的圖片的高度在展示空間受限的情況下弦疮，圖片去自適應生成高度的時候夹攒，雖然圖片顯示完全了蜘醋，但是卻變形了胁塞，不知這是不是一個微信的Bug。
所以解決問題的方法也很簡單压语，直接去掉父元素的高度啸罢，度父元素自適應即可。
這篇文章只是寫出關于微信圖片變形時的一個解決問題的思路胎食，其它幾種模式出問題其實可以按照同樣的辦法來分析解決問題扰才。
