How to make images in Bootstrap Carousel responsive?
92,372
Solution 1
Try this jq, it makes your .carousel-inner as window height. but remember to -height your navnbar, footer ect. all other elements/divs heights you have to -.
function init_carousel() {
H = +($(window).height() /* -height here */); // or $('.carousel-inner') as you want ...
$('.carousel-inner').css('height', H + 'px');
}
window.onload = init_carousel;
init_carousel();
Solution 2
Try this bootsnip http://bootsnipp.com/snippets/featured/simple-responsive-carousel. This is a good website for some helpful copy-paste snippets
for bootstrap.
Author by
nattienatz
Updated on January 31, 2020Comments
-
nattienatz over 4 years
Is there a way to make your images within bootstrap's carousel responsive with a fixed height? I've tried everything. I also used img-responsive, and in the CSS I tried everything as well.
Here's my html
<div class="item active"> <img src="images/slide1.jpg" alt="First slide" class="img-responsive"> <div class="container"> <div class="carousel-caption" style="padding-bottom:90px;"> <h1>Totes for all</h1> <p>Personalize your style</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p> </div><!-- /.carousel-caption --> </div><!-- /.container --> </div><!-- /.item --> <div class="item"> <img src="images/slide2.png" alt="Second slide" class="img-responsive"> <div class="container"> <div class="carousel-caption"> <div class="caption_background"> <h1>Pattern it</h1> <p>Choose your favorite</p> </div> <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p> </div><!-- /.carousel-caption --> </div><!-- /.container --> </div><!-- /.item --> </div><!-- /.carousel-inner --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.myCarousel -->
Here's my CSS