css - Twitter Bootstrap - Responsive Image & Carousel

Question

I am using the latest version of the twitter bootstrap.

I am also using the bootstrap-responsive.css.

I wish to have an image (As a picture frame), and a carousel (one provided with the bootstrap) within the center of such image. However i wish for them to be responsively resized.

The typical way I would have done this is, to make the carousel have position:relative, and simple overlap onto the image. But with the active resizing this results in problems.

Quite new to the whole media queries thing with css, any ideas of how this can be achieved?

Answer 1

我使用引导程序的轮播制作网站的做法是......

<div id = "myCarousel" class = "carousel slide">
      <div class = "carousel-inner">
            <!--each slide goes here-->
            <div class = "item active">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <div class = "item">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <!--etc-->
      </div><!--end carousel-inner-->
</div><!--end carouselslide-->

然后在CSS中，我会有

#myCarousel
{
     background-image:url(your background image path here);
}

#myCarousel.carousel-inner
{
     width: 80%; /*carousel width size here - my example will use 80%, if you want the carousel to fill entire screen, then just remove this width element.*/
     margin-left: auto;
     margin-right: auto;
     /*These two margins are to center the carousel if you set a smaller width. :) */
}

顺便说一下，我使用了 bootstrap.min.css。