Javascript Bootstrap Carousel 图像未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10591422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel image doesn't align properly
提问by Nambi
Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn't align with the border properly.
请看下图，我们使用 bootstrap carousel 来旋转图像。但是，当窗口宽度较大时，图像与边框无法正确对齐。
But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.
但是 bootstrap 提供的轮播示例总是可以正常工作，无论窗口的宽度如何。按照代码。
Can someone explain why carousel is behaving differently? Is this anything to do with Image size or some bootstrap config is missing?
有人可以解释为什么轮播的行为不同吗？这与图像大小或缺少某些引导程序配置有关吗？
<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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
回答by atrepp
The solution is to put this CSS code into your custom CSS file:
解决方案是将此 CSS 代码放入您的自定义 CSS 文件中：
.carousel-inner > .item > img {
margin: 0 auto;
}
回答by thouliha
With bootstrap 3, just add the responsive and center classes:
使用 bootstrap 3，只需添加响应类和中心类：
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
This automatically does image resizing, and centers the picture.
这会自动调整图像大小，并使图片居中。
Edit:
编辑：
With bootstrap 4, just add the img-fluidclass
使用 bootstrap 4，只需添加img-fluid类
<img class="img-fluid" src="img/....jpg">
回答by vekozlov
I faced the same problem and solved it this way:
It's possible to insert non-image content to Carousel, so we can use it.
You should first insert div.inner-item(where you will make center alignment), and then insert image inside this div.
我遇到了同样的问题并以这种方式解决了它：可以将非图像内容插入到 Carousel 中，因此我们可以使用它。您应该首先插入div.inner-item（您将在其中进行居中对齐），然后在此 div 中插入图像。
Here is my code (Ruby):
这是我的代码（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>
And my css-code(.scss):
还有我的 css 代码（.scss）：
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
回答by Daniel A.A. Pelsmaeker
While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.
虽然vekozlov的答案将在 Bootstrap 3 中工作以使您的图像居中，但当轮播缩小时它会中断：图像保留其大小而不是随着轮播缩小。
Instead, do this on the top-level carousel div:
相反，在顶级轮播上执行此操作div：
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.
这将使整个轮播居中并防止其超出图像的宽度（即 900 像素或任何您想要设置的宽度）。但是，当旋转木马按比例缩小时，图像也会随之缩小。
You should put this styling info in your CSS/LESS file, of course.
当然，您应该将此样式信息放在 CSS/LESS 文件中。
回答by Hatef
In Bootstrap 4, you can add mx-autoclass to your imgtag.
在 Bootstrap 4 中，您可以mx-auto向img标签添加类。
For instance, if your image has a width of 75%, it should look like this:
例如，如果您的图像宽度为 75%，它应该如下所示：
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
Bootstrap will automatically translate mx-autoto:
Bootstrap 将自动转换mx-auto为：
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}
回答by Tung
I am facing the same problem with you. Based on the hint of @thuliha, the following codes has solved my issues.
我和你面临同样的问题。根据@thuliha 的提示，以下代码解决了我的问题。
In the htmlfile, modify as the following sample:
在html文件中，修改为如下示例：
<img class="img-responsive center-block" src=".....png" alt="Third slide">
In the carousel.css, modify the class:
在 中carousel.css，修改类：
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
回答by lala
Try this
尝试这个
.item img{
max-height: 300px;
margin: auto;
}
回答by Art L. Richards
It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:
它可能与您的风格有关。就我而言，我在父“项目”div 中使用了一个链接，因此我不得不更改样式表以说明以下内容：
.carousel .item a > img {
display: block;
line-height: 1;
}
under the preexisting boostrap code:
在预先存在的 boostrap 代码下：
.carousel .item > img {
display: block;
line-height: 1;
}
and my image looks like:
我的形象看起来像：
<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>
回答by rnaka530
I think I have a solution:
我想我有一个解决方案：
In your personal style sheet page, assign the width & height to matchyour image dimensions.
在您的个人样式表页面中，分配宽度和高度以匹配您的图像尺寸。
Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)
在顶部 div 上创建一个额外的单独“类”，用跨度占用空间......（如下所示）
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!
在不接触 bootstrap.css 的情况下，在您自己的样式表中，调用“carousel”（或您选择的任何标签）以匹配原始像素的宽度和高度！
.carousel {
width: 320px;
height: 200px;
}
}
So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~
所以就我而言，我使用 320x200 的小图像进行轮播。bootstrap.css 中可能有预设尺寸，但我不喜欢更改它，因此我可以尝试与未来版本保持同步。希望这有帮助~~
回答by rnaka530
For the carousel, I believe all images have to be exactly the same height and width.
对于轮播，我相信所有图像的高度和宽度都必须完全相同。
Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a
此外，当您从引导程序返回脚手架页面时，我很确定 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>
So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P
所以是的，在一行中设置跨度空间时必须小心，因为如果图像宽度太大，它会将您的 div 发送到下一个“行”，这并不有趣：P
