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;  //圖片居中

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