Question

请看下面的图片，我们正在使用bootstrap carousel来旋转图像。但是，当窗口宽度较大时，图像不能正确对齐边框。

但无论窗口的宽度如何，bootstrap提供的轮播示例始终都能正常工作。遵循代码。

有人能解释为什么旋转木马表现不同吗？这与图像大小或某些引导配置有关吗？

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

carousel image

Answer 1

解决方案是将此CSS代码放入您的自定义CSS文件中：

.carousel-inner > .item > img {
  margin: 0 auto;
}

Answer 2

使用bootstrap 3，只需添加响应和中心类：

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

这会自动调整图像大小，并使图像居中。

编辑：

使用bootstrap 4，只需添加img-fluid类

即可

<img class="img-fluid" src="img/....jpg">

Answer 3

我遇到了同样的问题并以这种方式解决了这个问题：可以将非图像内容插入到Carousel中，以便我们可以使用它。您应首先插入 div.inner-item （您将在中心对齐的位置），然后在此div中插入图片。

这是我的代码（Ruby）：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我的css-code（.scss）：

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Answer 4

虽然vekozlov的答案可以在Bootstrap 3中使用以使图像居中，但当缩小旋转木马时它会中断：图像保留其大小而不是缩小旋转木马。

相反，请在顶级轮播div上执行此操作：

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

这将使整个旋转木马居中并防止其超出图像宽度（即900像素或任何您想要设置的宽度）。但是，当缩小旋转木马时，图像会随之缩小。

当然，您应该将此样式信息放在CSS / LESS文件中。

Answer 5

它可能与你的风格有关。在我的情况下，我在父“item”div中使用了一个链接，所以我不得不改变我的样式表来说出以下内容：

.carousel .item a > img {
  display: block;
  line-height: 1;
}

在预先存在的boostrap代码下：

.carousel .item > img {
  display: block;
  line-height: 1;
}

我的图片如下：

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Answer 6

我想我有一个解决方案：

在您的个人样式表页面中，指定宽度和宽度。高度匹配您的图片尺寸。

在顶部div上创建一个额外的单独的“class”，它可以占用空间......（如下所示）

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

如果没有触摸bootstrap.css，请在您自己的样式表中调用“carousel”（或您选择的任何标签）以匹配原始像素的宽度和高度！

.carousel       {
            width: 320px;
            height: 200px;

}

所以在我的情况下，我使用小型320x200图像来旋转木马。 bootstrap.css中可能有预设的维度，但我不喜欢改变它，所以我可以尝试在将来的版本中保持最新状态。希望这有帮助~~

Answer 7

我遇到了同样的问题。根据@thuliha的提示，以下代码解决了我的问题。

在html文件中，修改为以下示例：

<img class="img-responsive center-block" src=".....png" alt="Third slide">

在carousel.css中，修改课程：

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Answer 8

试试这个

    .item img{
      max-height: 300px;
      margin: auto;
    }

Answer 9

你的图像宽度是否与span6完全相差460px？在我的情况下，使用不同的图像大小，我在我的图像上放置了一个高度属性，以确保它们的高度都相同，并且轮播不会在图像之间调整大小。

在您的情况下，尝试设置一个高度，以使此高度与您的轮播内部div的宽度之间的比率与图像的aspectRatio相同

Answer 10

对于旋转木马，我相信所有图像必须具有完全相同的高度和宽度。

另外，当你从bootstrap返回脚手架页面时，我很确定span16 = 940px。考虑到这一点，我认为如果你有一个

，我们可以假设

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

所以是的，在一行中设置跨距空间时要小心，因为如果图像宽度很大，它会将你的div发送到下一个“行”，这没什么好玩的：P

Link 1

Answer 11

@Art L.理查兹的解决方案没有成功。现在在bootstrap.css中，原始代码已经变成这样了。

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530的代码会打破引导程序的流畅特性。

我没有一个好的解决方案，但我确实修好了。我非常仔细地观察了bootstrap的轮播示例http://twitter.github.com/bootstrap/javascript.html#carousel。

我发现img宽度必须大于网格宽度。在span9中，宽度最高为870像素，因此您必须准备大于870像素的图像。如果img外面有更多容器，因为所有容器都有边框或边距，你可以使用宽度较小的图像。

Answer 12

将此插入您的轮播所在的css父div类。

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

Answer 13

在Bootstrap 4中，您可以将mx-auto类添加到img标签中。

例如，如果您的图片的宽度为75％，则应如下所示：

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

引导程序会自动将mx-auto转换为：

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Bootstrap Carousel图像没有正确对齐

13 个答案: