Html 使引导'；s旋转木马中心和响应？

我希望旋转木马图像位于中心（水平），默认情况下不是这样。我在第二阶段遵循解决方案

但是，使用此解决方案，当旋转木马调整大小且小于图像时，图像将被裁剪，而不是默认缩放

---

如何使图像居中，但使其延伸到旋转木马项目？

请尝试为旋转木马中的图像指定一个以%为单位的宽度

.item img {
    width:100%;
}

---

我想你有不同大小的图像。我自己测试了这个，它的工作原理如您所述（始终居中，图像宽度适当）

/*CSS*/
c类包装{
宽度：80%；/*例如*/
保证金：自动；
}
.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：100%；/*是否使用此选项*/
保证金：自动；
}



你好
你好
你好

由于高度可变，这会创建一个“跳跃”。。。要解决此问题，请尝试以下方法：

或者使用媒体查询设置您自己的固定高度。

添加此选项

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

当然，其中一个父div需要有一个位置：relative，但我相信默认情况下是这样的

---

请参见此处：

为旋转木马html代码中的每个图像添加一个类，然后使用css apply

边距：0 auto

现在（在Boostrap 3和4上）它只需：

.carousel-inner img {
  margin: auto;
}

---

在使用CMS时出现了与此非常类似的问题，但使用上述解决方案无法解决。我所做的是将以下内容放入适用的css中：

background-size: cover

在使用引导时，为了便于放置，我使用了：

background-position: center center /* or whatever position you wanted */

我已将

放在另一个div中，其中包含类容器（

…

）。这也解决了问题

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

---

通过在bootstrap 3上使用此选项，这个简单的解决方案对我很有效：

#carousel-example-generic{
    margin:auto;
}

---

在bootstrap v4中，我使用

<img class="d-block mx-auto" max-width="100%" max-height="100%">

---

在Boostrap 4上，只需将

mx auto

添加到您的旋转木马图像类

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div> 

---

根据需要与样品结合。

上述解决方案对我都不起作用。可能还有其他一些风格冲突

对于我自己来说，下面的方法奏效了，希望它能帮助其他人。我用的是bootstrap4

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}

<!-- The slideshow -->
            <div class="carousel-inner" align="center">             
                <div class="carousel-item active">
                    <img src="image1.jpg" alt="no image" height="550">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" alt="no image" height="550">
                </div>                
                <div class="carousel-item">
                    <img src="image3.png" alt="no image" height="550">
                </div>
             </div>

---

这项工作对我来说非常简单，只需添加属性align=“center”。 在引导程序4上测试

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}

<!-- The slideshow -->
            <div class="carousel-inner" align="center">             
                <div class="carousel-item active">
                    <img src="image1.jpg" alt="no image" height="550">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" alt="no image" height="550">
                </div>                
                <div class="carousel-item">
                    <img src="image3.png" alt="no image" height="550">
                </div>
             </div>

在您有固定高度的情况下，不会让图像大于身体。因此，这张图片会被拉伸。2015年7月：在简单性方面取代公认答案（适用于Bootstrap 3）的伟大答案。这真的是一个解决方案吗？最优雅的解决方案，无需添加任何自定义类@rox你能解释一下d-block的作用吗