寫這篇文章的目的，是因?yàn)槲沂褂胕mage組件的mode屬性中取值為縮放的時候，在圖片下方出現(xiàn)了滾動軸。

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

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

因?yàn)樯鲜龅倪@兩點(diǎn)還要針對小程序中的view組件和scroll-view組件區(qū)分，這個涉及到了對image的width的設(shè)定，現(xiàn)在先講最普通的view組件。

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

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

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

scaleToFill，有設(shè)置100% 

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

scaleToFill，沒有設(shè)置100% 

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

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

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