Bootstrap Carousel height adjust as browser height

Question

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,

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>

This is what img-fluid is for: [img-fluid class](https://getbootstrap.com/docs/4.0/content/images/#responsive-images) — Granny, Dec 18 '17 at 09:21

score 0 · Answer 1 · 2017-12-18T10:51:26.060

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>

Thank @Highdef its look nice but image below area get hide on large screen. — Mudassar, Dec 18 '17 at 10:31
@Mudassar What do you mean? Can you show the output screenshot for a large screen? — , Dec 18 '17 at 10:35
Please check these below screenshot links, same image on different screens. — Mudassar, Dec 18 '17 at 10:48
@Mudassar Did you try the first solution or the second solution I gave? — , Dec 18 '17 at 10:50
@Mudassar Did you remove all the width:100% and used inline CSS with the images for the heights as I did "height:100%;margin:0 auto;"? — , Dec 18 '17 at 10:52
@Mudassar And with margin:0 auto you can align them in the center. You can either clip them, or maintain their original height with background showing. Else it will stretch. My first solution showed, having the original dimensions and not stretching without clipping them aligned in the center. second one is to fill the complete slide by clipping so it doesnt get stretched. — , Dec 18 '17 at 10:54
Didn't any way to make full slide and hight without stretch? — Mudassar, Dec 18 '17 at 10:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161439/discussion-between-highdef-and-mudassar). — , Dec 18 '17 at 10:56
https://www.dropbox.com/s/9usiuibiqcshkv1/screen1.png?dl=0 this is full slide haha but you can center it too, but yeah not possible without clipping — , Dec 18 '17 at 10:57
Full slide solution stretch the image and if I remove height =100% from image its show black empty area in the bottom. — Mudassar, Dec 18 '17 at 13:19
@Mudassar I know that's why I gave the height:100% solution, otherwise it will stretch anyway. — , Dec 18 '17 at 13:31
Thanks for the response. I was fine with below clipping off but it also the empty area. :( — Mudassar, Dec 18 '17 at 13:35

score 0 · Answer 2 · answered Dec 18 '17 at 09:18

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

answered Dec 18 '17 at 09:18

Md. Abu Sayed

2,396
2
18
26

Thanks @Md. Abu Sayed its working fine but image below area get hide on large screen. – Mudassar Dec 18 '17 at 10:34
@mudassar I am Not Understand Your "image below area get hide on large screen" Comment. please describe me ..! – Md. Abu Sayed Dec 18 '17 at 10:39
Please check these below screenshot links, same image on different screens. – Mudassar Dec 18 '17 at 10:48
@Mudassar, I understand your problem. You don't know HTML block image behavior, when you talk image 100% width then image automatically extend height on image ratio. anyone side auto then image not stretches. If You went fully width and height then use background-image and background size cover. Thank you. – Md. Abu Sayed Dec 18 '17 at 10:59
Thanks @Md. Abu Sayed but there is one other issue also its showing black empty area in bottom on few screens. – Mudassar Dec 18 '17 at 11:04
dropbox.com/s/f9jf3y7i8b6i0vt/… – Mudassar Dec 18 '17 at 11:04

Bootstrap Carousel height adjust as browser height

2 Answers2