bootstrap如何使固定高度响应？

如何制作一个固定高度的元素，以自举3响应？例如，我将carousal的高度设置为650px。但是我不能像图片那样让它响应。任何想法？bootstrap如何使固定高度响应？

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

来源

2014-09-22 laukok

您是否尝试更改img元素的高度而不是.carousel-inner？ – fstanis 2014-09-22 18:18:52

图像具有不同的高度，所以我想通过使用溢出隐藏的方式将它们裁剪... – laukok 2014-09-22 18:21:58

将img-responsive类设置为高度：100％以允许图像变为全高。 – crazymatt 2014-09-22 18:22:49

您可以使用CSS3 对象适合调整您的图像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>

来源

2014-09-22 18:55:09 dizel3d

不被广泛支持。太多红色：http://caniuse.com/#feat=object-fit – Christina 2014-09-22 19:05:04

好吧，使用polyfill库像https://github.com/schmidsi/jquery-object-fit – dizel3d 2014-09-22 19:07:56

我已经改善了答案，通过添加css3'背景大小“的方式。 – dizel3d 2014-10-19 18:29:30

尝试：

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

，或者我认为是好做我与JS吨（自举与我们使用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; }

来源

2014-09-22 18:35:36 pirs

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

来源

2015-10-30 09:41:33 Ashish

，您将需要再整转盘控制类媒体查询这里仅仅是一个例子代码中添加

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

来源

2016-09-30 20:41:06 majali

我曾与响应固定的高度同样的问题。我用vh代替px。在我的情况下，它的作品就像一个魅力

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

来源

2017-03-17 09:23:45

bootstrap如何使固定高度响应？

回答

相关问题