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如何使固定高度響應？

回答

相關問題