react給一個div行內加背景圖片並實現cover覆蓋模式居中顯示

具體background簡寫可以參考這篇文章.

這裏注意，如果簡寫裏要寫background-size，則這裏必須寫 /  ,否則整個背景圖片樣式沒有解析出來。

它和font以及border-radius裏簡寫方式使用的/用法相似。/可以在支持這種寫法的瀏覽器裏在background-position後面接着寫background-size。

<div style={{
                            display: 'inline-block',
                            width: '208px',
                            height: '100%',
                            background: `url("${thumb[0]}") center center / cover no-repeat`,
                        }}>
</div>

效果如圖：

代碼解析之後樣式：（即使順序不是這樣寫的解析出來也是這樣的）

 如果分開寫background其他設置，會出現一個問題，就是第一次加載圖片是cover覆蓋的，no-repeat，center center，但是打開其他頁面再回來這些樣式就都不生效了，只剩一個背景圖片了。