作者：電鰻效應(yīng)，來自原文地址
這次講到是在scroll-view中的image，暫時不寫scroll-view了，我自己也對它了解甚少，有其他博主肯定寫得比我這個新手好。
這次出現(xiàn)在我寫的pixiv的小程序（依舊附上github地址：github-pixiv）中的問題是，圖片出現(xiàn)了滾動軸，而且橫軸縱軸都有。如圖：
和在《微信小程序 image組件的mode屬性 以及 圖片出現(xiàn)橫向滾動軸》中圖片出現(xiàn)滾動軸的原因一樣，都是因為設(shè)置了固定的圖片的大小，以至于圖片真正的大小是這樣的：
所以（自以為是的┑(￣Д ￣)┍）就去給圖片設(shè)置了width:100%
發(fā)覺高度也不對，還存在著縱滾動軸，于是去設(shè)置height:100%
但是還是存在著縱向的滾動軸。這我就一臉懵逼了。。[黑人問號？？？]
盡管沒能明白具體原因，但是被我（假的多年開發(fā)經(jīng)驗）一試 ，問題在image設(shè)置的display:inline-block; 被我改成display:block倒也起作用了。
（正好對比一下在前面提到的mode取值中mode=”aspectToFill”和mode=”aspectFill”的區(qū)別能在這里很好地體現(xiàn)出來圖片的問題）
|
mode取值 |
圖片 |
|
mode=”aspectToFill”（就是圖片被壓縮得挺難看的） |
|
|
mode=”aspectFill”（這個的圖片就好看很多） |
|
至于為什么image的display屬性是一開始就被為inline-block呢，找到inline-block的解釋是（鏈接：block，inline和inline-block概念和區(qū)別）
display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
也就是說，inline-block只是為了讓image擁有block的寬高，又能和inline一樣并排同行。img標簽在css中的設(shè)定是block元素，image組件在微信小程序的設(shè)定是inline-block元素。
至于為什么image被我改成了display為block之后還是能并排呢？是因為包裹著這個image組件的父組件view的class就設(shè)定了這個父組件是display:inline-block，所以還能一排展現(xiàn)。（如圖，父元素是display:inline-block）
|
然后問題來啦！！ |
然后又是試試試 |
|
1、如果設(shè)置image的display為inline會怎樣？（仍然保留width:100%和height:100%） |
1、對于設(shè)置image的display為inline（仍然保留width:100%和height:100%），不會怎么樣，和設(shè)置display為block（仍然保留width:100%和height:100%）表現(xiàn)一樣。
inline對寬度的定義是，其寬度隨元素的內(nèi)容而變化。 |
|
2、設(shè)置image的display為block，去掉width:100%和height:100%會怎樣 |
2、設(shè)置為block的image，沒有了width:100%和height:100%，而是用320和240，就會出現(xiàn)滾軸（而且無論是橫軸還是縱軸都出現(xiàn)！！搞事情太激動?。。?/td>
|
|
3、設(shè)置image的display為inline，去掉width:100%和height:100%會怎樣 |
3、不會怎么樣，因為本身image的寬高就是320和240 |
搞事情的來啦
針對表格的第2點，明明設(shè)置的是block，按照css的定義，默認情況下，block元素寬度自動填滿其父元素寬度，卻又出現(xiàn)了滾軸（如下圖）
于是沒辦法。。
結(jié)論就是：
1、在scroll-view中，image的縮放取值 aspectFill 比 aspectToFill 好
2、在scroll-view中，image的display為inline-block會導(dǎo)致圖片出現(xiàn)橫縱軸的滾動條，解決方案有兩種（前提包裹著這個image的父組件也必須是inline-block才會滾動）
-
image的display為inline
-
image的display為block，同時設(shè)置image的width:100%;height:100%;
|
