controlling the height of the carousel size
12,055
On the class .item
add some custom CSS that overrides Bootstraps core CSS like so:
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: 400px !important;
}
</style>
This will make the carousel size 400px.
By default, the height is set to auto, but since we don't want that, we manually set a size and say that it's !important
so the browser knows that this style is overruling the bootstrap css set prior.
I hope this helps and makes sense.
Author by
moe
Updated on June 14, 2022Comments
-
moe almost 2 years
I am trying to make sure that my carousel size stay the same in terms of height. I am using different images and i understand the image size are different but not sure how to control the height of the image. I want my carousel height stay the same regardless of the image size so how can i control that? here is the code i am using:
<div id="myCarousel" class="carousel slide" data-ride="carousel" > <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <%--<img src="img_chania.jpg" alt="Chania" width="460" height="345">--%> <img src="img/sleep1.jpg" alt="Chania" width="460" height="345" /> <div class="carousel-caption"> <h1>Example headline.</h1> <p>this is test </p> </div> </div> <div class="item"> <%-- <img src="img_chania2.jpg" alt="Chania" width="460" height="345">--%> <img src="img/image5.jpg" alt="Chania" width="460" height="345"/> </div> <div class="item"> <%--<img src="img_flower.jpg" alt="Flower" width="460" height="345">--%> <img src="img/nature3.jpg" alt="Chania" width="460" height="145" /> <div class="carousel-caption"> <h1>Example headline.</h1> <p>this is test </p> </div> </div> <div class="item"> <%--<img src="img_flower2.jpg" alt="Flower" width="460" height="345">--%> <img src="img/nature2.jpg" alt="Chania" width="460" height="245"/> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
-
moe over 9 yearsthanks Jason, that fixed the issue of height but now the width is smaller now and before the width was the same size as the carousel. please help. thanks
-
Jason Bassett over 9 yearsHmm, try setting the width to a certain desired width as well. Or try setting it to auto.