Bootstrap carousel resizing image

Question

Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.

I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.

Here is my code:

<!--==========================================--> <!-- Carousel                                 --> <!--==========================================--> <div>     <div id="myCarousel" class="carousel slide">         <div class="carousel-inner">              <!--Carousel item 1-->             <div class="item active">                 <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />                 <div class="carousel-caption">                     <h4>First Thumbnail label</h4>                         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>                 </div>             </div>              <!--Carousel item 2-->             <div class="item">                 <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />                 <div class="carousel-caption">                     <h4>Second Thumbnail label</h4>                         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>                 </div>             </div>              <!--Carousel item 3-->             <div class="item">                 <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >                 <div class="carousel-caption">                     <h4>Third Thumbnail label</h4>                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</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>  <!--==========================================--> <!-- Side Buttons                             --> <!--==========================================--> <div>     <ul class="nav nav-tabs nav-stacked">         <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>         <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>         <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>         <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>     </ul> </div> 

Answer 1

The reason why your image is resizing which is because it is fluid. You have two ways to do it:

1. Either give a fixed dimension to your image using CSS like:

   .carousel-inner > .item > img {   width:640px;   height:360px; }

2. A second way to can do this:

   .carousel {   width:640px;   height:360px; }

Answer 2

add this to your css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {     width: 100%; }