I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/8/
It's a full width bootstrap carousel.
I'd like to change the height and still keep it full width.
Is the height determined by the image height.
How can I chanhe the height of the carousel and keep it 100% width.
.carousel-inner{
// height: 300px;
}
.item, img{
height: 100% !important;
width: 100% !important;
border: 1px solid red;
}
This question is related to
css
twitter-bootstrap
carousel
For Bootstrap 4
In the same line as image
add height: 300px;
<img src="..." style="height: 300px;" class="d-block w-100" alt="image">
like Answers above, if you do bootstrap 4 just add few line of css to .carousel , carousel-inner ,carousel-item and img as follows
.carousel .carousel-inner{
height:500px
}
.carousel-inner .carousel-item img{
min-height:200px;
//prevent it from stretch in screen size < than 768px
object-fit:cover
}
@media(max-width:768px){
.carousel .carousel-inner{
//prevent it from adding a white space between carousel and container elements
height:auto
}
}
From Bootstrap 4
.carousel-item{
height: 200px;
}
.carousel-item img{
height: 200px;
}
Thank you! This post is Very Helpful. You may also want to add
object-fit:cover;
To preserve the aspect ration for different window sizes
.carousel .item {
height: 500px;
}
.item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 500px;
}
For bootstrap 4 and above replace .item
with .carousel-item
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 500px;
}
You can use this. Tt is simplest way.
.carousel-item{
height: 200px;
}
.carousel-item img{
height: 200px;
}
This worked for me.
.carousel-item {
height: 500px;
}
.item, img{
position: absolute;
object-fit:cover;
height: 100% !important;
width: 100% !important;
/*min-height: 500px;*/
}
Source: Stackoverflow.com