Twitter Bootstrap - 响应式图片和轮播答案

【问题标题】：Twitter Bootstrap - Responsive Image & CarouselTwitter Bootstrap - 响应式图片和轮播
【发布时间】：2012-08-08 18:14:32
【问题描述】：

我正在使用最新版本的 twitter 引导程序。

我也在使用 bootstrap-responsive.css。

我希望在此类图像的中心有一个图像（作为相框）和一个旋转木马（一个与引导程序一起提供的）。但是，我希望它们能够响应地调整大小。

我会这样做的典型方法是，使轮播具有位置：相对，并且简单地重叠到图像上。但是随着主动调整大小，这会导致问题。

对于使用 css 的整个媒体查询来说还很陌生，有什么想法可以实现吗？

【问题讨论】：

你用谷歌搜索过“响应式轮播”吗？
是的，轮播是响应式的。我只是问什么是在图像上旋转木马的最佳技术，同时调整响应大小。例如笔记本电脑的图片，在此类图片的“笔记本电脑屏幕”中带有旋转木马。两者都根据@media 查询响应式地调整大小

标签： css twitter-bootstrap responsive-design carousel

【解决方案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。

【讨论】：