Question

我已经实现了一个bootstrap轮播而没有覆盖任何样式。我希望它能够像现在一样回应它，所以旋转木马和图像一起响应而不会使图像被裁剪或扭曲 - 但我希望旋转木马的起始高度更短。

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

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

我的代码：

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

您还可以将max-height设置为相对度量：）

Answer 2

这是一个可以帮助你的JSFiddle：http://jsfiddle.net/gh4Lur4b/140/

您可以在.carousel-inner类中更改轮播的高度，但html结构与您的结构略有不同，您可以根据自己的要求进行调整。

.carousel-inner{
    height: 550px;
}

只调整旋转木马的高度可能会导致图像被压扁，所以我建议使用媒体查询自定义旋转木马的响应性（根据Bootstrap的文档）：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

希望答案可以帮到你！

Answer 3

您只需在css中添加以下行

.bx-wrapper img{height: 550px; background-position: center; background-size: cover;}

希望它的工作：）

改变自举旋转木马的高度 - 保持响应

3 个答案: