title: how to make twitter bootstrap 3 image carousel auto resize image to fit within the carousel?
body: <p>I'm having issues trying to get my images to fit into the box exactly. </p>
  
  <p>I want them to keep their aspect ratio, size, dimensions but fit/shrink into the carousel box.</p>
  
  <p><img src="https://i.stack.imgur.com/0NpG0.jpg" alt="enter image description here"></p>
  
  <p>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... </p>
  
  <p><a href="http://www.bollinbuild.co.uk/index.html" rel="noreferrer">www.bollinbuild.co.uk/index.html</a> is where you can see the carousel in action.</p>
  
  <p>each image has a greater size in dimension then the carousel so therefore i lose half the image and the quality. </p>
  
  <p>the 3 images im using are;</p>
  
  <p><a href="http://www.bollinbuild.co.uk/images/1.jpg" rel="noreferrer">www.bollinbuild.co.uk/images/1.jpg</a><br> 
  <a href="http://www.bollinbuild.co.uk/images/2.jpg" rel="noreferrer">www.bollinbuild.co.uk/images/2.jpg</a><br>
  <a href="http://www.bollinbuild.co.uk/images/3.jpg" rel="noreferrer">www.bollinbuild.co.uk/images/3.jpg</a></p>
  
  <p>this is my code;</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .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% */ 
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  
  &lt;div class="bs-example"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Carousel indicators --&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;!-- Carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="active item"&gt;
                  &lt;div style="background:url(/images/1.jpg) center center;
            background-size:cover;" class="slider-size"&gt;
    &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div style="background:url(/images/2.jpg) center center;
            background-size:cover;" class="slider-size"&gt;
    &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div style="background:url(/images/3.jpg) center center;
            background-size:cover;" class="slider-size"&gt;
    &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.END CAROUSEL DIV --&gt;
      &lt;/div&gt;&lt;!-- /.END MYCAROUSEL DIV --&gt;
  &lt;/div&gt;&lt;!-- /.END BSEXAMPLE --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <blockquote>
  <pre><code>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
  </code></pre>
  </blockquote>
  
  <p>source <a href="http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/" rel="noreferrer">http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/</a></p>