Question

我最近一直在玩Bootstrap Carousel。我有一个问题，就是希望图像保持响应，而不是把它放在里面的部分的整个宽度，但我确实希望图像本身保持我通过CSS完成的宽高比。我似乎无法找到如何直接在div的中心获取图像。

这是我的CSS

.carousel-image {
display: block;
max-width:460px;
max-height:190px;
width: auto;
height: auto;

}

这是HTML

<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="carousel-image" src="images/placeholder.png" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
            <h3 class="text-success">...</h3>
            <p class="text-success">...</p>
        </div>
   </div>

我正在使用Bootstrap CDN，点击here!可以看到该部分

谢谢大家，祝你有美好的一天。

Answer 1

尝试将图像居中。

.carousel-image {
  margin:0 auto;
  max-width:460px;
}

Answer 2

所以我为你制作了一个JS小提琴，点击 here 查看

我所做的是选择.carousel-item并添加text-align center属性

.carousel-item {
  text-align: center
}

在旋转木马的中心定位Bootstrap Carousel图像

2 个答案: