html - 更改 Bootstrap 轮播的高度 - 保持响应

Question

我在没有覆盖任何样式的情况下实现了 Bootstrap 轮播。我希望它以目前的方式响应，因此旋转木马和图像一起响应而不会裁剪或扭曲图像 - 但我希望旋转木马的起始高度更短。

它的响应类似于此页面上的响应: http://www.suug.co.uk/

所以当浏览器全宽时它是 650px 高，我可以看到高度属性没有被设置，所以我想知道我是否可以保持它的响应方式但改变起始高度说， 550 像素。

我的代码:

<div class="row">
    <div class="carousel slide" id="bannerFrontPage">

        <div class="carousel-inner">
            <div class="item"><a href=""><img src=""></a></div>
            <div class="item"><a href=""><img src=""></a></div>
            <div class="item"><a href=""><img src=""></a></div>
        </div>


        <a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"><span class="sr-only">Previous</span></a> 
        <a class="right carousel-control" data-slide="next" href="#bannerFrontPage"> <span class="sr-only">Next</span></a>
    </div>
</div>

Answer 1

我的解决方案如下:

.carousel img {
    max-height: 300px;
    margin: 0 auto;
}

您还可以将最大高度设置为相对尺寸:)