寫這篇文章的目的，是因為我使用image組件的mode屬性中取值為縮放的時候，在圖片下方出現了滾動軸。

另外就是本文章只是為了區分開mode屬性中的取值問題，并不給你什么有用的或者現成的搭配。只能說，如果你也是在對mode屬性存在一些疑惑的話，希望能在這篇文章受到一點提示。 
按套路，先上微信官方開發文檔的截圖 

我所做的pixiv是需要大量圖片的網站。P站供畫手們上傳自己的作品。圖片有大有小，按照這個，我們要做的可以分成兩種 
1、對上傳上來的圖片進行縮放（一般是縮小），放進我們規定好大小的格子中。 
2、對上傳上來的圖片進行裁剪，假設我們只需要整張圖片的中間部分就可以了。

因為上述的這兩點還要針對小程序中的view組件和scroll-view組件區分，這個涉及到了對image的width的設定，現在先講最普通的view組件。

如圖，現在我有一張這么大的圖片，我只要放進這么小的格子里面。（看紅框） 

按照分類點，我們來講第一點（縮放）我做的時候出現的問題。 
（看下圖）這個小格子并沒有規定大小，它是一個weui-flex__item，也就是flex:1（在這里就是占據了整個橫面的50%）。對于image這個組件本身，我設置了width:100%（待會來看看如果把這個100% 去掉會怎樣）。對于我們要調整的這張圖片，首先我們明確了是縮放，也就是從scaleToFill、aspectFit、aspectFill、widthFix這四個值中取。下面就是四種對應顯示的樣子（看圖）。 

乍一看，scaleToFill和aspectFill就是我們要用的，但是感覺好像scaleToFill和aspectFill沒有區別，展示的效果都是一樣一樣的。這就得說回我們剛才說的，有沒有給image組件設置了width:100%的問題，下面就針對有無100%來區分。 
1、有設置image的width:100% 
aspectFill，有設置100% 

scaleToFill，有設置100% 

2、沒有設置image的width:100%（可以看見，圖片出現了橫滾動軸） 
aspectFill，沒有設置100% 

scaleToFill，沒有設置100% 

一開始我做的時候，是沒有給圖片設置width為100%的，于是出現了滾動軸，還特別奇怪。調試一看，原來是圖片原本的320px的寬度已經超出了格子的寬度，并且image組件自己已經設定好overflow:hidden（如圖，沒有設置width為100%的時候image的width） 

對于裁剪這個，應該就不用說了吧，這個很好理解。

結論就是：使用aspectFill或者scaleToFill最好還是給image的width設置為100%，就不會在圖片下方出現橫滾動軸啦。