cssbootstrap-slider

Bootstrap slider image getting stretched in responsive view


is there any solution for bootstrap slider image stretch problem for responsive view ? I don't want to set height default

http://getbootstrap.com/examples/carousel/

I tried with the above slider which is an default slider given in twitter bootstrap. when I included images in that slider it was stretching. If anyone faced this issue let me know the solution

Slider Responsive View - Image Getting Stretched


Solution

  • I'm not sure if you already looking for this, but Bootstrap also provides a class for responsive images. Just added it to the img-tag.

    HTML

    <div class="slider">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="http://dreamatico.com/data_images/cat/cat-6.jpg"  class="img-responsive" alt="Slider 1">
            <div class="carousel-caption">
            <h3>Caption Text</h3>
          </div>
       </div>
       <div class="item">
         <img src="http://dreamatico.com/data_images/cat/cat-6.jpg"  class="img-responsive" alt="Slider 2">
         <div class="carousel-caption">
           <h3>Caption Text</h3>
         </div>
       </div>
      <div class="item">
        <img src="http://dreamatico.com/data_images/cat/cat-6.jpg"  class="img-responsive" alt="Slider 3">
        <div class="carousel-caption">
          <h3>Caption Text</h3>
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
      </div> <!-- Carousel -->
    </div>
    

    JavaScript

    $('.carousel').carousel({
        interval: 3000
    })
    

    See it also on jsfiddle.