CODEWITHSUNDEEP
csstwitter-bootstrap-3height
lowercase
lowercase

Reputation: 1220

Bootstrap 3 Jumbotron fluid height according to responsive image within

I have a jumbotron in which there is a DIV. The DIV contains an image which is set to be responsive like below:

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

And the following CSS...

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

When I resize the browser window, the image shrinks (as it should), but the jumbotron height stays at 420px.

How do I make the jumbotron height react in a fluid way to contain the image (whatever size it is? Setting the jumbotron height to 100% has no effect.

Upvotes: 0

Views: 9792

Answers (1)

AlejoVinueza
AlejoVinueza

Reputation: 13

If you are working with LESS you could use the bootstrap variables and media queries.

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

If you are working just with CSS you can change @screen-md-min to 992px

Upvotes: 1

Related Questions