如何在 bootstrap 轮播中使用 100% 宽度的图像防止动画期间的高度变化

Question

Bootstrap 3 carousel在动画时应该使用固定高度的图片。 轮播是使用 bootstrap 教程

中的代码创建的

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
            <div class="item active">
                <a href="124">
                    <img class="carousel-img" src="124" />
                </a>
            </div>
            <div class="item ">
                <a href="123">
                    <img class="carousel-img" src="123" />

                </a>
            </div>
    </div>
</div>

使用来自

的答案将图像宽度设置为轮播宽度

.carousel-img {
    width: 100%;
    height: auto;
}

我的屏幕分辨率大，缩放级别小，动画时图像高度降低。 如何使用固定高度让内容不跳转？

Answer 1

只需添加此 CSS,

.carousel-inner > .item{
   width: 100%;
}