如何在引导轮播中使用100％宽度的图像来防止动画期间的高度变化

Question

Bootstrap 3 carousel should use fixed-height images during animation. Carousel is created using code from bootstrap tutorial

 <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>

Image widths are set to carousel width using answer from

How to center image in carousel

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

I screen resolution is big and zoom level is small, image height decreases on animation. How to use fixed height so that content does not jump ?

Answer 1

Just add this CSS,

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