Bootstrap Carousel Image Responsive

Question

I am using Bootstrap Carousel which has images with varying height. So this causes the Slider to jump up and down in height.

What i want to achieve is set the height of carousel to a height based on the following caluclation

Browser Window Height - Header Height(fixed) - Footer Height (fixed)

so that the slider can take the max height of the window and resizes based on the users browser window.

I have the following Code

<div id="carousel-example-generic">
      <div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
        <div class="carousel-inner">
          <div class="item"> <img alt="900x500" src="images/slider/img1.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item active"> <img alt="900x500" src="images/slider/img2.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="item"> <img alt="900x500" src="images/slider/img3.jpg" class="img-responsive">
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#carousel-example-captions" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a data-slide="next" href="#carousel-example-captions" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
    </div>

When i set a height to the image as follows the image ratio gets distorted and does not display in the full aspect ratio.

Link: http://play.mink7.com/suoll/v2/

How the image is enter image description here and how its shown

enter image description here

When i dynamically set the height of the image it gets distorted as follows

enter image description here

This question (http://stackoverflow.com/questions/13391566/twitter-bootstrap-carousel-different-height-images-cause-bouncing-arrows), maybe can help you! — Matteo Codogno, May 30 '14 at 08:51
@PapaSmurf i tried dynamically setting the height of the image. it then kills the aspect ratio of the image and is distorted. image if ur using a browser which is resized on ur screen. — Harsha M V, May 30 '14 at 08:54
with jsfiddle i can not test height responsive... :( Have you tried with media queries? @media (max-width:320px){ img{ height:50px; } } — Matteo Codogno, May 30 '14 at 09:45
@PapaSmurf when i set the height for .carousel the images still bleed out :( — Harsha M V, May 30 '14 at 09:46
bassically what i want to do it. Define the whole carousel height and the images should comfortably fit inside it retaining its aspect ratio and center itself to the screen leaving the whitespace bleeding out. — Harsha M V, May 30 '14 at 09:50
Might seem far fetched but have you tried `class="img-responsive"`? — Panoply, May 30 '14 at 09:59
quote "When i dynamically set the height of the image it gets distorted as follows" that's happened because the width of image is not set "auto" — Matteo Codogno, May 30 '14 at 10:15
Deferring from a code solution, I would personally go for an external slider, I've fiddled with the BS3 Carousel time and time again, it's more then possible however with additional options. E.g Swipe, responsiveness maybe possible CSS3 effects, it's just one big time consuming minefield. http://w3widgets.com/responsive-slider/ is a great alternative. — Raptus, May 30 '14 at 10:30
@Raptus i have tried them problem is different size of images in my use case :( — Harsha M V, May 30 '14 at 10:41

Bootstrap Carousel Image Responsive

0 Answers0