css - 根据响应图像内的 Bootstrap 3 Jumbotron 流体高度

Question

我有一个超大屏幕，其中有一个 DIV。 DIV 包含一个图像，该图像设置为响应式，如下所示:

<div class="jumbotron">  
    <div id="header" class="container">  
        <div class="header-photo">  
        <img src="img/pic.png"class="img-responsive">
        </div>
    </div>
</div>

还有下面的 CSS...

.jumbotron {
   height: 420px;
   background: transparent;
}
.header-photo {
   position: absolute;
   left: 0px;
   top: 24px;
}
#header.container {
   position: relative;
}

当我调整浏览器窗口的大小时，图像缩小(应该如此)，但超大屏幕的高度保持在 420 像素。

如何使超大屏幕高度以流畅的方式 react 以包含图像(无论图像大小如何？将超大屏幕高度设置为 100% 没有任何效果。

Answer 1

如果您正在使用 LESS，您可以使用 Bootstrap 变量和媒体查询。

.jumbotron{
      @media (max-width: @screen-md-min) {
        height: 287px; //Or any value you want
      }
}

如果您只使用 CSS，您可以将 @screen-md-min 更改为 992px