scroll-view中，image元件出現滾軸
這次講到是在scroll-view中的image，暫時不寫scroll-view了，我自己也對它瞭解甚少，有其他博主肯定寫得比我這個新手好。
這次出現在我寫的pixiv的小程式（依舊附上github地址：github-pixiv）中的問題是，圖片出現了滾動軸，而且橫軸縱軸都有。如圖：
所以（自以為是的┑(￣Д ￣)┍）就去給圖片設定了width:100%
發覺高度也不對，還存在著縱滾動軸，於是去設定height:100%
但是還是存在著縱向的滾動軸。這我就一臉懵逼了。。[黑人問號？？？]
儘管沒能明白具體原因，但是被我（假的多年開發經驗）一試 ，問題在image設定的display:inline-block; 被我改成display:block倒也起作用了。
（正好對比一下在前面提到的mode取值中mode=”aspectToFill”和mode=”aspectFill”的區別能在這裡很好地體現出來圖片的問題）
| mode取值 | 圖片 |
|---|---|
| mode=”aspectToFill”（就是圖片被壓縮得挺難看的） |  |
| mode=”aspectFill”（這個的圖片就好看很多） |  |
至於為什麼image的display屬性是一開始就被為inline-block呢，找到inline-block的解釋是（連結：block，inline和inline-block概念和區別）
display:inline-block
簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
也就是說，inline-block只是為了讓image擁有block的寬高，又能和inline一樣並排同行。img標籤在css中的設定是block元素，image元件在微信小程式的設定是inline-block元素。
至於為什麼image被我改成了display為block之後還是能並排呢？是因為包裹著這個image元件的父元件view的class就設定了這個父元件是display:inline-block，所以還能一排展現。（如圖，父元素是display:inline-block）
| 然後問題來啦！！ | 然後又是試試試 |
|---|---|
| 1、如果設定image的display為inline會怎樣？（仍然保留width:100%和height:100%） | 1、對於設定image的display為inline（仍然保留width:100%和height:100%），不會怎麼樣，和設定display為block（仍然保留width:100%和height:100%）表現一樣。 inline對寬度的定義是，其寬度隨元素的內容而變化。 |
| 2、設定image的display為block，去掉width:100%和height:100%會怎樣 | 2、設定為block的image，沒有了width:100%和height:100%，而是用320和240，就會出現滾軸（而且無論是橫軸還是縱軸都出現！！ |
| 3、設定image的display為inline，去掉width:100%和height:100%會怎樣 | 3、不會怎麼樣，因為本身image的寬高就是320和240 |
搞事情的來啦
針對表格的第2點，明明設定的是block，按照css的定義，預設情況下，block元素寬度自動填滿其父元素寬度，卻又出現了滾軸（如下圖）
於是沒辦法。。
結論就是：
1、在scroll-view中，image的縮放取值 aspectFill 比 aspectToFill 好
2、在scroll-view中，image的display為inline-block會導致圖片出現橫縱軸的滾動條，解決方案有兩種（前提包裹著這個image的父元件也必須是inline-block才會滾動）
- image的display為inline
- image的display為block，同時設定image的width:100%;height:100%;