bootstrap輪播組件,大屏幕圖片居中效果

在慕課網學習bootstrap輪播組件的時候，瞭解到輪播的圖片都放在了類名爲item下的img中

 

視頻中老師對圖片自適應採用給圖片img設置width=100%完成，然而這樣自適應處理圖片在不一樣屏幕中效果不一樣，大屏效果很是糟糕。好比

這樣一張圖片，

 

 爲了圖片自適應設置width=100%，在寬1920px下顯示效果是這樣的

顯然，由於圖片設置了100%的寬度，其大部份內容被截去，顯示很是糟糕。

 

後來想了想。有沒有辦法能夠讓圖片真正的自適應呢而且居中呢，因而想到了css3背景圖片屬性background-size。就開始對輪bootstrap播組件進行小的修改。

//棄用item類下的img標籤，用div代替，圖片以背景圖片的形式在css中引入，併爲其設置
	width: 100%;
	height: 100%;
        background-size: contain;    

　　以上代碼效果是這樣的

 

內容所有顯示了，但圖片在大屏幕下沒有居中。這個簡單，那就給div設置background-position:cenetr吧

            width: 100%;  //div自適應父級寬度
            height: 100%;  //div自適應高度
            background-size: contain;  //不能使用cover,
            background-repeat: no-repeat;  
            background-position: center;  //圖片居中

最終效果：圖片在任何分辨率下，都能自適應顯示所有內容。