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;
}

当我调整浏览器窗口大小时，图像缩小（应该如此），但是jumbotron高度保持在420px。

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

Answer 1

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

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

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

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

1 个答案: