Question

我对twitter bootstrap carousel有如下愿望：

当屏幕比旋转木马更大时，我希望图像居中。
当屏幕小于旋转木马时，我想只看到图像的一部分。图像的这一部分应该居中。
图像不应调整大小或缩放
过渡应该有效。

下面我的示例解决了问题1-3 ..但它打破了4.如果我愿意打破3，我可以很容易地修复4，但这并不好。

HTML：

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
          <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
        </p></pthis></div>
      </div>
    </div>
    <div class="item">
      <img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px">
      <div class="container">
        <div class="carousel-caption">
          <h1>Changes to the Grid</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200X600" height="600px" width="1200px">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>With "mobile-first" there is now only one percentage-based grid.</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
</div>
<!-- /.carousel -->

CSS

/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
  padding-bottom: 40px;
  color: #5a5a5a;
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 600px;
  width: 1200px;
  background-color:#bbb;
  left: 50%;
  margin-left: -600px;
}
.carousel img {
  position: absolute;
  top: 0;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Remve the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  }
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

}

Answer 1

如果您希望根据设备的屏幕尺寸重新调整图像大小，这可能会有所帮助。 width = "100%"将完成这项工作。

<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%">

Answer 2

只需将此添加到您的css：

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

Answer 3

添加此

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

当然其中一个父div需要有一个位置：相对，但我相信默认情况下会这样做。

请在此处查看：http://paginacrestinului.ro/

twitter-bootstrap中心轮播图像，与屏幕尺寸无关

3 个答案: