bootstrap如何使固定高度响应？

Question

如何使用bootstrap 3响应固定高度元素？例如,我将carousal的高度设置为650px.但我无法像图像那样使其响应.任何的想法？

CSS,

#article-carousel .carousel-inner{
    height:650px;
}

HTML,

<!-- Carousel items -->
<div class="carousel-inner">

   <div class="active item">
     <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
   </div>
....

Answer 1

您可以使用css3 object-fit来调整图像大小http://jsfiddle.net/xcoq9xxg/

img {
    height: 650px;
    width: 100%;
    object-fit: cover; // here
}

它适用于Chrome和Opera.将polyfill库用于其他人:https://github.com/schmidsi/jquery-object-fit或https://github.com/anselmh/object-fit.

另一种方法是使用css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/

.image {
    height: 650px;
    background-position: center;
    background-size: cover;
}

它适用于没有javascript的所有现代浏览器,但您需要使用<div>而不是<img>:

<div class="image" style="background-image: url('my-image.jpg')"></div>

Answer 2

我对响应式固定高度有同样的问题。我使用 vh 而不是 px。在我的情况下，它就像一个魅力

img {
    height: 85vh;
    width: 100%;
    object-fit: cover; // here
}