Bootstrap Carousel Image响应

Question

我正在使用Bootstrap Carousel，它具有不同高度的图像。所以这会导致Slider在高度上下跳跃。

我想要达到的目的是根据以下计算将旋转木马的高度设置为高度

  

浏览器窗口高度 - 页眉高度（固定） - 页脚高度（固定）

这样滑块可以占据窗口的最大高度，并根据用户浏览器窗口调整大小。

我有以下代码

<div id="carousel-example-generic">
      <div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
        <div class="carousel-inner">
          <div class="item"> <img alt="900x500" src="images/slider/img1.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item active"> <img alt="900x500" src="images/slider/img2.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="item"> <img alt="900x500" src="images/slider/img3.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#carousel-example-captions" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a data-slide="next" href="#carousel-example-captions" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
    </div>

当我按如下方式为图像设置高度时，图像比率会失真，并且不会以完整的宽高比显示。

链接：http://play.mink7.com/suoll/v2/

图像如何 以及如何显示

当我动态设置图像的高度时，它变形如下