Jquery 引导转盘图像响应

我使用的是具有不同高度图像的引导旋转木马。因此，这会导致滑块在高度上上下跳跃

我想要实现的是将转盘的高度设置为基于以下计算的高度

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

因此，滑块可以采用窗口的最大高度，并根据用户浏览器窗口调整大小

我有以下代码

<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>

第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

当我如下设置图像的高度时，图像比率会失真，并且不会以全宽高比显示

链接：

形象如何 它是如何表现出来的

当我动态设置图像的高度时，它会失真如下

---

这个问题（），也许可以帮助你@我尝试动态设置图像的高度。然后，它会消除图像的纵横比并使其失真。如果你使用的浏览器在你的屏幕上调整了大小，你可以在JSFIDLE中传输你的代码吗？@papsurf@papsurf添加了一些图片来更好地解释