Bootstrap Carousel 图像未正确对齐

Question

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

但是无论窗口的宽度如何，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>

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 代码（.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

在 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;
}

Answer 6

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

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

Answer 7

这可能与您的风格有关。就我而言，我在父“项目” 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 8

我想我有一个解决办法：

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

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

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

我和你面临同样的问题。根据@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 10

试试这个

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

Answer 11

@Art L. Richards 的解决方案没有奏效。 现在在bootstrap.css中，原来的代码变成了这样。

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

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

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

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

Answer 12

对于轮播，我相信所有图片的高度和宽度都必须完全相同。

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

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