Twitter Bootstrap Question posted in

Bootstrap Carousel height adjust as browser height-Twitter bootstrap

I’m trying to adjust my Bootstrap slider hight as browser screen hight but couldn’t get properly.

I know this question already asked on StackOverflow but didn’t found a better solution.

I found one solution by setting height = 85vh but slider images looked stretched on big screens.

I attached the slider screenshot below,

enter image description here
I also added below my current code snippet

$('.carousel-1').carousel();
 .carousel {
            left: 0px;
            height: 85vh;
        }

        .carousel-inner>.item {
            height: 85vh;
        }
        .sliderBG>.item>img {
            height: 85vh;
        }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner sliderBG">
                <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                    
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
                <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="width:100%;">
                   
                </div>
            </div>

            <a class="carousel-control left" href="#carousel-1" data-slide="prev">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control right" href="#carousel-1" data-slide="next">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
Tags:

2

Answers


  1. 0

    That is because you’re trying to make height responsive but at the same time stretching the image with respect to its width not height.

    What you can do?

    Well you can set the height to 100% instead of the width for the images in slider and set the margin to auto to align it to center;

    $('.carousel-1').carousel();
    .carousel {
  left: 0px;
  height: 85vh;
}

.carousel-inner{
  height: 100%;
}

.carousel-inner .item{
  height: 100%;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner sliderBG">
    <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="height:100%;margin:0 auto;">

    </div>
  </div>

  <a class="carousel-control left" href="#carousel-1" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#carousel-1" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>

    But if you want to fill the complete slide and don’t mind clipping off the image then:

    $('.carousel-1').carousel();
    .carousel {
  left: 0px;
  height: 85vh;
}

.carousel-inner{
  height: 100%;
}

.carousel-inner item img{
height:100%;margin:0 auto;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-1" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner sliderBG">
    <div class="item active"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties" style="">

    </div>
    <div class="item"><img src="https://images.pond5.com/multi-ethnic-business-team-meeting-footage-008969212_prevstill.jpeg" alt="Nshama Properties">

    </div>
  </div>

  <a class="carousel-control left" href="#carousel-1" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#carousel-1" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    You can change only your CSS part and get fun..!

    .sliderBG>.item>img {
    display: block;
    height: 100%;
    max-width: inherit;
    width: auto !important;
    margin: 0 auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search