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

Posted 2023-03-05

【中文标题】引导如何使固定高度响应？

【英文标题】：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 方式改进了答案***.com/a/25981221/947687。它适用于所有没有 javascript 的现代浏览器。

【参考方案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;