html - 如何在 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>

图像宽度设置为轮播宽度使用来自

的回答

How to center image in carousel

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

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

Answer 1

只需添加此 CSS，

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