此问题在此处已有答案：

Bootstrap carousel width and height（8个答案）
六年前就关门了。
我想使响应和固定高度响应滑块像http://blog.invisionapp.com。
那怎么办呢？
我编写了以下代码（我还编写了一个JSFiddle）：

HTML格式

<div id="img-carousel" data-ride="carousel" class="carousel slide">
  <!-- Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#img-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#img-carousel" data-slide-to="1"></li>
    <li data-target="#img-carousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides-->
  <div role="listbox" class="carousel-inner">
    <div class="item active"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Caption Animation</h2>
        <p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p>
      </div>
    </div>
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated bounceInDown">Bootstrap Slider</h2>
        <p class="animated bounceInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Get Started</a></p>
      </div>
    </div>
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg" alt=""/>
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Mobile Friendly</h2>
        <p class="animated fadeInRight"><a href="#" class="btn btn-transparent btn-rounded btn-large">Download Now!</a></p>
      </div>
    </div>
  </div>
  <!-- Controls--><a href="#img-carousel" role="button" data-slide="prev" class="left carousel-control"><i aria-hidden="true" class="fa fa-chevron-left"></i><span class="sr-only">Previous</span></a><a href="#img-carousel" role="button" data-slide="next" class="right carousel-control"><i aria-hidden="true" class="fa fa-chevron-right"></i><span class="sr-only">Next</span></a>
</div>

CSS格式

.carousel-inner .item {
  max-height: 680px;
}
.carousel-inner .item:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.carousel-control {
  width: 10%;
}

.carousel-control .fa {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .fa.fa-chevron-right {
  right: 50%;
  margin-right: -10px;
}

@media screen and (min-width: 768px) {
  .carousel-control .fa {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }
}
@media screen and (min-width: 768px) {
  .carousel-control .fa-chevron-left {
    margin-left: -15px;
  }
}
/**
 * Slider caption
 */
 .right.carousel-control, .left.carousel-control {
    display: none;
}
.carousel-caption h2 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.carousel-caption p {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .carousel-caption {
    right: 20%;
    left: 20%;
    bottom: 20%;
  }
}
.btn-transparent {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-transparent:hover {
  background-color: #fff;
}

.btn-rounded {
  border-radius: 70px;
}

.btn-large {
  padding: 11px 45px;
  font-size: 18px;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.blogs img{
  width: 100%;
}

Java脚本

$('.carousel').carousel({
    pause: 'none'
})