使Bootstrap的轮播中心和响应？ [英] Make Bootstrap's Carousel both center AND responsive?

问题描述

我想要我的轮播图片在中心（水平），这不是默认情况下。我遵循此主题中的解决方案。

I want my carousel images to be at the center (horizontally), which is not by default. I follow the solution at this topic.

但是，使用此解决方案，当轮播大小调整并小于图像时，会裁剪图像，而不是默认缩放。

However, using this solution, when the carousel is resized and smaller than the image, the image is cropped instead of scaling as default.

推荐答案

我假设你有不同大小的图片。

I assume you have different sized images. I tested this myself, and it works as you describe (always centered, images widths appropriately)

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

这会创建一个跳转由于可变高度...解决这个问题， ：选择列表中最高的图片

This creates a "jump" due to variable heights... to solve that, try something like this: Select the tallest image of a list

或使用media-query设置您自己的固定高度。

Or use media-query to set your own fixed height.

这篇关于使Bootstrap的轮播中心和响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！