iT邦幫忙

2

18.Bootstrap(中文教程)元件:幻燈片(Carousel)調整畫面

ㄧ.幻燈片調整畫面

.component.demo{
 padding: 50px;
}

#demo.component{
  padding: 50px;
}
#demo .carousel-item{
  height: 500px;
}
#demo .carousel-item img{
  min-height: 500px;
  max-height: 600px;
  object-fit: cover;
}

/* */

重點:
1.#demo .carousel-item img的尺寸不可低於
#demo .carousel-item的尺寸,如低於的話會看不到指示器而破版
2.保持原有的圖片比例的話可以加入object-fit: cover;
3.以上調整讓每張照片的尺寸都能一樣

codepen


尚未有邦友留言

立即登入留言