Setting a max-height on a Bootstrap Carousel
Try this CSS and delete max-height from .carousel
:
.carousel .item img {
max-height: 768px;
min-width: auto;
}
I added code at the bottom to override Bootstrap styles.
JSFIDDLE
if you want to maintain responsive on the width, you can use javascript/jquery.
I used jquery to maintain it's height to 50% of the width
$(function(){
var SetCarouselHeight = function() {
$("#myCarousel .item > img").height(function(){
return $("#myCarousel").width() * 0.5;
});
}
SetCarouselHeight();
$(window).resize(function(){
SetCarouselHeight();
});
});