Question

我希望我的轮播图像位于中心（水平），默认情况下不是这样。我在this topic处遵循解决方案。

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

我如何将图像居中，但要将其拉伸到旋转木马项目？

Answer 1

现在（在Bootstrap 3和4上）它只是：

.carousel-inner img {
  margin: auto;
}

Answer 2

我假设你有不同大小的图像。我自己测试了这个，它就像你描述的那样工作（总是居中，图像宽度适当）

/*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>

由于变化的高度，这会产生“跳跃”...要解决这个问题，请尝试以下方法：Select the tallest image of a list

或使用媒体查询设置您自己的固定高度。

Answer 3

在Boostrap 4上，只需将mx-auto添加到您的轮播图像类中。

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>

根据需要与bootstrap carousel documentation的样本结合使用。

Answer 4

添加此

.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/

Answer 5

为carousel html代码中的每个图像添加一个类，然后使用css apply margin: 0 auto。

Answer 6

spec/fixtures/test.json

这个简单的解决方案对我有用

Answer 7

使用CMS时遇到的问题非常类似，但上述解决方案无法解决问题。我所做的解决方法是将以下内容放在适用的css中：

background-size: cover

并且出于放置目的，如果您使用bootstrap，我使用：

background-position: center center /* or whatever position you wanted */

Answer 8

在bootstrap 3上使用它：

#carousel-example-generic{
    margin:auto;
}

Answer 9

对我来说，这项工作非常简单，只需添加属性align =“ center”。在Bootstrap 4上进行了测试。

<!-- The slideshow -->
            <div class="carousel-inner" align="center">             
                <div class="carousel-item active">
                    <img src="image1.jpg" alt="no image" height="550">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" alt="no image" height="550">
                </div>                
                <div class="carousel-item">
                    <img src="image3.png" alt="no image" height="550">
                </div>
             </div>

Answer 10

尝试给旋转木马中的图像指定宽度％？

.item img {
    width:100%;
}

Answer 11

我已将<div class="carousel" id...>放在另一个div中，并带有类容器（<div class="container"><div class="carousel" id="my-carousel">...</div></div>）。这也解决了这个问题。

Answer 12

在bootstrap v4中，我居中并使用

将轮播img填充到屏幕上

<img class="d-block mx-auto" max-width="100%" max-height="100%">

非常确定这需要设置父元素的高度或宽度

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}

Answer 13

以上解决方案均不适用于我。可能还有其他样式冲突。

对我自己而言，以下工作有效，希望它可以对其他人有所帮助。我正在使用引导程序4。

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}

使Bootstrap的Carousel既中心又响应？

13 个答案: