[Bootstrap]讓Carousel裡面的圖片垂直至中

Bootstrap裡面的元件Carousel(輪播)，在切換圖片的時候，若是圖片大小不一樣，常會有不好看的畫面出現。

一般水平置中比較簡單

.carousel-inner > .item > img{
      width: 80%;
      margin: auto;
}

如果要垂直置中的話，我查了一些方法，有一種把圖片變成背景的方法，但我覺得不太好用。

所以用另一個方法，是改變圖片的位置，但是要先設定.item的高度，然後移動圖片的高度往下移50%，再往上移50%，這樣就剛好在一半的位置，達到垂直置中的效果。這是來源網址

.carousel-inner > .item {
    height: 300px;
}

.carousel-inner .item img {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

但這時候如果想要設計一個響應式(RWD)的網站，就會發現要去設定每種寬度視窗 .item的高度

可以使用簡單的jquery解決，就是去偵測 .item目前的高度，再去設定一次

$(".carousel-inner > .item").css("height",$(".carousel-inner > .item > img").height());

但如果又想在測試的時候，改變視窗寬度測試，就可以使用jquery的resize()事件

$( window ).resize(function() {
  $(".carousel-inner > .item").css("height",$(".carousel-inner > .item > img").height());
});

以上