Fixed height and width for carousel

Question

I use a boot carousel, but I need a fixed width and height so that all of my images automatically fit a specific height and width. Can someone please help me achieve this.

<div class="row"> <div class="span8"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" class=""></li> <li data-target="#myCarousel" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com"> <div class="carousel-caption"> <h4>First Thumbnail label</h4> <p>Deals you cannot miss.</p> </div> </div> <div class="item"> <img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com"> <div class="carousel-caption"> <h4>Second Thumbnail label</h4> <p>Claim it now.</p> </div> </div> <div class="item"> <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com"> <div class="carousel-caption"> <h4>Third Thumbnail label</h4> <p>Act fast. Only for today.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div> </div> </div> 

Answer 1

Apply the following style to the carousel list.

 <div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;"> ... </div 

Answer 2

Since some images may have a height of less than 500 pixels, it’s better to keep the automatic setup, so I recommend the following:

 <div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">` 

Answer 3

In your main styles.css file styles.css change the height / auto to whatever parameters you want. For example, 500px :

 #myCarousel { height: auto; width: auto; overflow: hidden; } 

Answer 4

To have a constant flow of images on different devices, you will need to specify a width and height value for each element of the carousel image, for example, here, in my example, the image will have a full width, but with a height of "400px" (you can specify your personal value )

 <div class="item"> <img src="image.jpg" style="width:100%; height: 400px;"> </div>