Bootstrap Carousel图片无法正确对齐

请看下面的图片，我们正在使用引导轮播来旋转图片。但是，当窗口宽度较大时，图像无法与边框正确对齐。

但是，无论窗口的宽度如何，引导程序提供的轮播示例始终可以正常工作。遵循代码。

有人可以解释为什么轮播的行为有所不同吗？这与图像大小有关还是缺少一些引导程序配置？

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

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

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

使用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">

我遇到了同样的问题，并以此方式解决了这一问题：可以将非图像内容插入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代码（.scss）：

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

尽管vekozlov的答案在Bootstrap 3中可以使您的图像居中，但当轮播缩小时，它将中断：图像保持其大小，而不是随轮播缩小。

而是在顶级轮播上执行此操作div：

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

这将使整个轮播居中，并防止其增长到超出图像宽度（即900 px或您要设置的任何宽度）。但是，轮播缩小时，图像随之缩小。

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

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

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

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

Bootstrap将自动转换mx-auto为：

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

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

它可能与您的样式有关。就我而言，我使用的是父“ 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>

我想我有一个解决方案：

在您的个人风格页纸，指定宽度和高度来匹配您的图像尺寸。

在最上面的div上创建一个额外的单独“类”，以使该空间适合于跨度...（如下所示）

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

在不触摸bootstrap.css的情况下，在您自己的样式表中，调用“轮播”（或您选择的任何标签）以匹配原始像素的宽度和高度！

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

}

因此，就我而言，我使用的是320x200的小型图片进行轮播。bootstrap.css中可能有预设的尺寸，但是我不喜欢更改它，因此我可以尝试与最新版本保持同步。希望这会有所帮助~~

我也面临着同样的问题。根据@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;
}

试试这个

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

您的图片的宽度是否恰好是span6的460像素？就我而言，对于不同的图像尺寸，我在图像上放置了height属性，以确保它们都具有相同的高度，并且轮播不会在图像之间调整大小。

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

@Art L. Richards的解决方案没有解决。现在在bootstrap.css中，原始代码变得像这样。

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

@ rnaka530的代码将破坏引导程序的流畅功能。

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

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

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

另外，当您从引导程序返回到脚手架页面时，我很确定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

链接1

将此插入到您的轮播所在的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];
}