[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());
});

以上

Leave a Reply

你的電子郵件位址並不會被公開。