Bootstrap Carousel 图像未正确对齐
Posted
技术标签:
【中文标题】Bootstrap Carousel 图像未正确对齐【英文标题】：Bootstrap Carousel image doesn't align properly 【发布时间】：2012-05-22 09:57:40 【问题描述】：请看下面的图片，我们正在使用引导轮播来旋转图片。 但是，当窗口宽度较大时，图像与边框无法正确对齐。
但是无论窗口的宽度如何，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 src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
【问题讨论】：
所有图片的宽度都一样吗？另外，它们是否延伸到.span6 容器？
我所有的图片都是相同的宽度和高度。他们似乎都在伸展。为了尝试修复，我尝试创建与引导示例提供的大小相同的图像。但是，它完全搞砸了大小。所以，我认为图像大小和 css 样式之间存在联系。但是，文档并没有完全描述这种关系。
我也遇到了这个问题，很郁闷。对我来说，事实证明它正在发生，因为包含轮播的 div 具有比轮播更宽的固定宽度。
也许隐藏电子邮件地址是个好主意 :)
【参考方案1】：
解决方案是将此 CSS 代码放入您的自定义 CSS 文件中：
.carousel-inner > .item > img
margin: 0 auto;
【讨论】：
这对我有用！我已经尝试过 vekozlov 方法但没有奏效，这行得通！非常感谢 轮播的height会随着图片的不同高度而变化，所以需要在css中定义一个固定的宽度。 超级！希望这只是“内置”的 BS 类，例如 .carousel-img-center 或其他东西。 我会试试边距，但我发现将height:none 添加到.carousel-inner > .item > img 比默认的height:500px 获得更好的结果
你应该为 Bootstrap 4 做.carousel-inner > .carousel-item > img margin: 0 auto; 。【参考方案2】：
使用 bootstrap 3，只需添加响应类和中心类：
<img class="img-responsive center-block" src="img/....jpg" >
这会自动调整图像大小，并使图片居中。
编辑：
使用 bootstrap 4，只需添加 img-fluid 类
<img class="img-fluid" src="img/....jpg">
【讨论】：
尝试了投票率最高的解决方案，但无济于事。这更清洁、更简单、更有效。谢谢！ 精益清洁。谢谢 非常感谢。我发誓我之前在谷歌上搜索过，但没有得到任何答案，这立即奏效了。 我正在使用 bootstrap 4 并且 img-fluid 类没有使图像居中。它们都是左对齐的。 @iaacp 只需将text-center 添加到<div class="carousel-item"> 开始标签【参考方案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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
还有我的 css 代码（.scss）：
.inner-item
text-align: center;
img
margin: 0 auto;
【讨论】：
这个 css 对我来说非常有用，除了固定轮播中图像的高度【参考方案4】：虽然vekozlov 的答案可以在 Bootstrap 3 中使您的图像居中，但当轮播按比例缩小时它会中断：图像保持其大小而不是随着轮播缩小。
相反，请在***轮播 div 上执行此操作：
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
这将使整个轮播居中，并防止其超出图像的宽度（即 900 像素或您想要设置的任何值）。但是，当旋转木马缩小时，图像也会随之缩小。
当然，您应该将此样式信息放入您的 CSS/LESS 文件中。
【讨论】：
【参考方案5】：在 Bootstrap 4 中，您可以将 mx-auto 类添加到您的 img 标记中。
例如，如果您的图片宽度为 75%，它应该如下所示：
<img class="d-block w-75 mx-auto" src="image.jpg" >
Bootstrap 会自动将mx-auto 翻译成：
ml-auto, .mx-auto
margin-left: auto !important;
.mr-auto, .mx-auto
margin-right: auto !important;
【讨论】：
【参考方案6】：您的图像是否具有与 span6 一样的 460 像素宽度？就我而言，对于不同的图像尺寸，我在图像上放置了一个高度属性，以确保它们的高度相同，并且轮播不会在图像之间调整大小。
在您的情况下，尝试设置一个高度，以便此高度与轮播内部 div 的宽度之间的比率与图像的 aspectRatio 相同
【讨论】：
它没有帮助。您认为图像格式重要吗？引导示例使用 JPEG 文件，而我使用的是 PNG 文件。这有什么区别吗？【参考方案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>
【讨论】：
【参考方案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 中可能有预设尺寸，但我不喜欢更改它，因此我可以尝试与未来版本保持同步。希望对你有帮助~~
【讨论】：
【参考方案9】：我和你面临同样的问题。根据@thuliha 的提示，以下代码解决了我的问题。
在html文件中，修改为如下示例：
<img class="img-responsive center-block" src=".....png" >
在carousel.css中，修改类：
.carousel .item
text-align: center;
height: 470px;
background-color: #777;
【讨论】：
【参考方案10】：试试这个
.item img
max-height: 300px;
margin: auto;
【讨论】：
欢迎来到 ***！如果您稍微解释一下这是如何解决问题的，您的回答可能会受益匪浅。仅代码的答案在 SO 上不太受欢迎。【参考方案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 之外有更多容器，因为所有容器都有边框或边距，您可以使用宽度较小的图像。
【讨论】：
【参考方案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
【讨论】：
【参考方案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" >
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
【讨论】：
以上是关于Bootstrap Carousel 图像未正确对齐的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 Carousel 响应式（图像和文本）
bootstrap *slide.bs.carousel* 事件未在 vue js 中触发
我的链接/脚本标签（提供缓存的 Bootstrap 版本）是不是正确？ Bootstrap Carousel 拒绝滑动
让 Bootstrap 的 Carousel 既居中又响应？