CODEWITHSUNDEEP
csstwitter-bootstrapcarousel
Max
Max

Reputation: 661

Responsive carousel according to browser height

How would you resize a carousel according to browser's height ?

For resizing according to width, Im able to make it responsive with this in CSS

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

But for making it responsive towards height, im not sure how would I do it.

Any clue ?

Upvotes: 0

Views: 2470

Answers (2)

CarlaG
CarlaG

Reputation: 1

Thanks Sachin Kanungo.

I had the same issue as Max. But for me it worked with these settings:

.carousel {
   height: 80vh; /*slider height equals to 80% of viewport height*/
   margin-bottom: 60px;
}
.carousel .item {
   min-width:100%;
   height:80vh; /*slider height equals to 80% of viewport height*/
   background-color: #777;
}
.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   height: 80vh; /*slider height equals to 80% of viewport height*/
}

Note: I'm using bootstrap 3.3.6

Upvotes: 0

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

You can use css unit vh for using screen height purposes. 100vh means whole viewport height. vh is dynamic so it changes as you change the screen size.

Here is one demo from fiddle

.carousel .item {
    max-width: 100%; /*slider width*/
    max-height: 100vh; /*slider height*/
}

Upvotes: 1

Related Questions