how to make twitter bootstrap 3 image carousel auto resize image to fit within the carousel?

Question

I'm having issues trying to get my images to fit into the box exactly.

I want them to keep their aspect ratio, size, dimensions but fit/shrink into the carousel box.

as you can see the im missing half the image, this is because i have a set height, but i want it to auto size to fit into the carousel box if that makes sense...

www.bollinbuild.co.uk/index.html is where you can see the carousel in action.

each image has a greater size in dimension then the carousel so therefore i lose half the image and the quality.

the 3 images im using are;

www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg

this is my code;

CSS

<style type="text/css">

.item{
    text-align: center;
    width: auto;
}

.bs-example{
    margin: 10px;
}

.slider-size {
height: 300px; /* This is your slider height */

}
.carousel {
width:80%;
margin:0 auto; /* center your carousel if other than 100% */ 
}
</style>

HTML

<div class="container">
<div class="row">

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 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>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <div style="background:url(/images/1.jpg) center center;
          background-size:cover;" class="slider-size">
  </div>
            </div>
            <div class="item">
                <div style="background:url(/images/2.jpg) center center;
          background-size:cover;" class="slider-size">
  </div>
            </div>
            <div class="item">
                <div style="background:url(/images/3.jpg) center center;
          background-size:cover;" class="slider-size">
  </div>
            </div>
        </div><!-- /.END CAROUSEL DIV -->
    </div><!-- /.END MYCAROUSEL DIV -->
</div><!-- /.END BSEXAMPLE -->
</div>
</div>

I read about putting the images as a div and as a background url rather then in tag but im still not getting the full image to sit in the carousel.

Replace the image with a container div using the image file as a background.
Set width to 100% so it will expand to fill it’s container.  Set the height of the slider so it will have a consistent display regardless of the image size.
Win

source http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Answer 1

Instead of making your images the background of a div, put them as an actual <img/> element within those divs and give them a height of 100% (choose height because your height will break before width since you have wide images).

This

<div class="slider-size">
    <img src="/images/1.jpg" style="height: 100%;" />
</div>

Instead of this

 <div style="background:url(/images/1.jpg) center center; background-size:cover;" class="slider-size"></div>

CSS Media queries:

/* Mobile */
@media (max-width: 767px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
         width: 80%;
    }
}

/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
        width: 80%;
    }
}

/* laptops */
@media (max-width: 1023px) and (min-width: 992px) {
    .slider-size {
         height: 200px;
    }
    .slider-size > img {
        width: 80%;
    }
}

/* desktops */
@media (min-width: 1024px) {
    .slider-size {
        height: 300px;
    }
    .slider-size > img {
        width: 60%;
    }
}