让 Bootstrap 的 Carousel 既居中又响应？
Posted
技术标签:
【中文标题】让 Bootstrap 的 Carousel 既居中又响应？【英文标题】：Make Bootstrap's Carousel both center AND responsive? 【发布时间】：2013-11-04 03:05:42 【问题描述】：我希望我的轮播图像位于中心（水平），这不是默认设置。我遵循this topic 的解决方案。
但是，使用此解决方案时，当轮播被调整大小并小于图像时，图像会被裁剪而不是默认缩放。
我怎样才能使我的图像居中，但让它延伸到轮播项目？
【问题讨论】：
【参考方案1】：现在（在 Boostrap 3+ 上）很简单：
.carousel-inner img
margin: auto;
【讨论】：
2015 年 7 月：就简单性而言，它取代了公认的答案（对于 Bootstrap 3）。【参考方案2】：这项工作对我来说非常简单，只需添加属性 align="center"。 在 Bootstrap 4 上测试。
<!-- The slideshow -->
<div class="carousel-inner" align="center">
<div class="carousel-item active">
<img src="image1.jpg" >
</div>
<div class="carousel-item">
<img src="image2.jpg" >
</div>
<div class="carousel-item">
<img src="image3.png" >
</div>
</div>
编辑：-
align 属性已弃用，请使用 CSS 属性。
https://developer.mozilla.org/en-US/docs/Web/API/htmlImageElement/align
【讨论】：
也适用于 BS5 ? 不推荐使用此解决方案。 但是它在带有 BS5 的 Chrome 91.0.4472.124 上工作，是否有任何简单的解决方案替代它？ 是的，这是有效的。但这已被弃用。所以将来这可能不起作用，你必须在那个时候更改代码。所以最好不要使用。 是的，我知道了，但我想知道替代解决方案是什么？如果你有想法可以分享吗【参考方案3】：以上解决方案都不适合我。可能还有其他一些样式冲突。
对于我自己，以下工作，希望它可以帮助别人。我正在使用引导程序 4。
.carousel-inner img
display:block;
height: auto;
max-width: 100%;
【讨论】：
【参考方案4】：在 Boostrap 4 上，只需将 mx-auto 添加到您的轮播图像类。
<div class="carousel-item">
<img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>
根据需要结合来自bootstrap carousel documentation 的样本。
【讨论】：
最优雅的解决方案，无需添加任何自定义类.....@rox 你能解释一下 d-block 的作用 d-block 设置 css 属性 display: block 。基本上，这些元素是垂直堆叠的。【参考方案5】：在 bootstrap v4 中，我使用
将轮播 img 居中并填充到屏幕上<img class="d-block mx-auto" max- max->
很确定这需要设置父元素的高度或宽度
html,bodyheight:100%;
.carousel,.carousel-item,.activeheight:100%;
.carousel-innerheight:100%;
【讨论】：
【参考方案6】：通过在引导程序 3 上使用它：
#carousel-example-generic
margin:auto;
【讨论】：
【参考方案7】：.carousel-inner > .item > img
margin: 0 auto;
这个简单的解决方案对我有用
【讨论】：
【参考方案8】：我已将 <div class="carousel" id...> 放在另一个带有类容器 (<div class="container"><div class="carousel" id="my-carousel">...</div></div>) 的 div 中。那也解决了。
【讨论】：
【参考方案9】：在使用 CMS 时遇到了与此非常相似的问题，但上述解决方案无法解决。我为解决它所做的是将以下内容放在适用的 css 中：
background-size: cover
如果您使用引导程序，为了放置目的，我使用了：
background-position: center center /* or whatever position you wanted */
【讨论】：
这真的是一个解决方案吗？【参考方案10】：在轮播html代码中为每张图片添加一个类，然后用css应用margin: 0 auto。
【讨论】：
【参考方案11】：添加这个
.carousel .item img
left: -9999px; /*important */
right: -9999px; /*important */
margin: 0 auto; /*important */
max-width: none; /*important */
min-width: 100%;
position: absolute;
当然，其中一个父 div 需要有一个 position:relative，但我相信默认情况下会这样做。
在这里查看：http://paginacrestinului.ro/
【讨论】：
【参考方案12】：我假设您有不同大小的图像。我自己对此进行了测试，它可以按照您的描述工作（始终居中，图像宽度适当）
/*CSS*/
div.c-wrapper
width: 80%; /* for example */
margin: auto;
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
width: 100%; /* use this, or not */
margin: auto;
<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/600x400">
<div class="carousel-caption">
hello
</div>
</div>
<div class="item">
<img src="http://placehold.it/500x400">
<div class="carousel-caption">
hello
</div>
</div>
<div class="item">
<img src="http://placehold.it/700x400">
<div class="carousel-caption">
hello
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
由于高度可变，这会产生“跳跃”...要解决这个问题，请尝试以下操作：Select the tallest image of a list
或者使用媒体查询来设置你自己的固定高度。
【讨论】：
【参考方案13】：尝试为轮播中的图像指定宽度（%）？
.item img
width:100%;
【讨论】：
如果你有一个固定的高度，不会让图像大于身体。所以图像会被拉伸。以上是关于让 Bootstrap 的 Carousel 既居中又响应？的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Carousel Image 滑块，我怎样才能让它工作？