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

enter image description here

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 背景大小 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
}

Answer 3

尝试：

.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }

，或者我认为用js更好（使用boostrap我们将使用jquery）：

...
function init_carousel(){
    H = +($( window ).height()); // or $('.carousel-inner') as you want ...
    $('.img-responsive').css('height',H+'px');
}
init_carousel();
...

在这种情况下，将div添加背景图像，你的css必须是：

.carousel-inner > item { position: relative; overflow:hidden;  }
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; }
.carousel-inner > item > .img-responsive { witdh:auto; }

Answer 4

尝试以下操作对我来说效果很好

<style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 500px;
      height: 350px;
  }
  .carousel
  {
  	height: 350px;
    width: 500px
  }
  </style>

Answer 5

          function Screensize() {
        try {
            var height = ((screen.height * 80) / 100);
            document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;");
        } 
        catch (ex)
        {  alert(ex); }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    }

Answer 6

你需要使用媒体查询来重新设置carousel-control类这里只是一个添加

的示例代码

 @media (max-width: 800px) {
    .carousel-control{
      height:350px;
    }
 }

bootstrap如何使固定高度响应？

6 个答案: