How to make a bootstrap carousel record responsive?

Question

How to make a bootstrap carousel record responsive?

I am trying to make my carousel responsive in Bootstrap 3.2. But I just can't get my signature to resize the image in my carousel. I think this is due to the "item" class and the way it does not resize using the browser. I think this may be relevant @media, but if so, I don’t know what to put there.

This is what happens.

Here is my main HTML carousel carousel:

<div class="item">
    <img src="http://goo.gl/PK4Kkh" alt="Third Slide">
    <div class="carousel-caption">
        <h1>Test</h1>
        <p>Test</p>
        <p><a class="btn btn-lg btn-primary" href="#button3" role="button">Button 3</a></p>
    </div> <!-- End of Carousel Caption -->
</div> <!-- End of Item -->

And my CSS:

.carousel
{
    height: 720px;
    margin-bottom: 0px;
}

.carousel-caption
{
    z-index: 10;
}

.carousel .item
{
    height: 720px;
    background-color: #777;
}

.carousel-inner > .item > img
{
    position: absolute;
        top: 51px;
        left: 0;
    min-width: 100%;
}

+4

html twitter-bootstrap

user3849544 Jul 22 '14 at 14:14

source share

3 answers

- :

<script>
  $(document).ready(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });

  $(window).resize(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });
</script>