Question

I have the Twitter Bootstrap carousel working quite well for the most part but my photos are of different widths and the caption on the bottom matches the widest width so when I have photos with less width the caption stays black for the previous width and looks a little unprofessional. My code is as follows and I was wondering if there is any way to fix this problem so the width always matches the photo.

<div class="row">
    <div class="span8 offset2">
            <div id="myCarousel" class="carousel slide">

                  <div class="carousel-inner">

                 <!-- here I loop through and add a bunch of photos -->
                  {% for photo in record_photos %}

                    <div class="active item">
                        <a href="/url"><img src="some-src"></a>
                        <div class="carousel-caption">
                            <h3 class="center-it">some caption</h3>
                        </div>
                    </div>

                   {% endfor %}

                  </div>

                  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

            </div>
        </div>
    </div>

Answer 1

I suggest picking a span size that will be the optimum size for the photo widths that you have as span will determine the carousel width. Larger images will shrink to the span width. Smaller images you could ‘upsize’ by placing them in a larger image with a solid (or transparent) background.

Carousel is designed to show images in the span it is in – conceivably you could dynamically alter the width but personally I think the changes would be somewhat visually jarring between images and there would be the back/next button locations to deal with as well.

BTW, note that in your template code above, every item is active. You will need to put some logic into the loop so that only the first loop iteration produces an item with active class