moe moe - 3 months ago 7
CSS Question

controlling the height of the carousel size

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>

Answer

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.