引导如何使固定高度响应？答案

【问题标题】：bootstrap how to make a fixed height responsive?引导如何使固定高度响应？
【发布时间】：2014-11-16 19:15:45
【问题描述】：

如何使用 bootstrap 3 使固定高度元素响应？例如，我将轮播的高度设置为 650 像素。但我不能让它像图像那样响应。有什么想法吗？

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

【问题讨论】：

您是否尝试更改 img 元素的高度而不是 .carousel-inner？
图像有不同的高度，所以我想通过使用溢出隐藏来裁剪它们...
将 img-responsive 类设置为 height:100% 以允许图像达到全高。
一般你从最小的最小宽度到最大的最小宽度进行媒体查询，并设置里面的高度。
我通过添加 css3 background-size 方式改进了答案stackoverflow.com/a/25981221/947687。它适用于所有没有 javascript 的现代浏览器。

标签： jquery html css twitter-bootstrap carousel

【解决方案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>

【讨论】：

我通过添加 css3 background-size 方式改进了答案。

【解决方案2】：

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

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案4】：

试试下面这对我来说效果很好

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

【讨论】：

【解决方案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); }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    }

【讨论】：

【解决方案6】：

您需要使用媒体查询重新设置 carousel-control 类的样式这里只是添加的示例代码

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

【讨论】：