Css Bootstrap 3 Jumbotron流体高度根据内部响应图像

我有一个jumbotron，其中有一个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>

当我调整浏览器窗口的大小时，图像会缩小（正如它应该的那样），但jumbotron的高度保持在420px

---

如何使jumbotron高度以流畅的方式反应以包含图像（无论大小？将jumbotron高度设置为100%没有任何效果。

如果使用较少的图像，则可以使用引导变量和媒体查询

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

---

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

如果不为jumbotron设置高度，会发生什么情况？事实上，这是有效的。是.header照片类导致了问题。根本不是jumbotron。谢谢！

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