Bootstrap-旋转木马，图像居中，并根据Div容器自动调整宽度和高度大小

Question

我正在尝试实现一个轮播与引导，其中的图像是居中和自动调整大小。例如，在JSFiddle中，正如您所看到的，第一个图像（垂直的图像）延伸了整个div，而第三个图像保持在顶部。我想重现Facebook或Twitter轮播的行为，其中图像被定位在中心，并根据包含它们的Div调整大小。你能帮帮我吗？

<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
    <li data-target="#myCarousel" data-slide-to="1">Two</li>
    <li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>

<!-- Inner -->
<div class="carousel-inner">
    <div class="item active">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/171147625_1208393786271117_8898528403586821491_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=dDKFCCAYB-oAX_m2xtu&_nc_ht=scontent.ffco3-1.fna&oh=aa418a1e5facad55e6e4781237602778&oe=609A1892" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 1 - Vertical</h1>
                <p>Hello!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/173646266_1210629629380866_4626783539462302067_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=QelU_ZVtqAcAX9wHI-l&_nc_ht=scontent.ffco3-1.fna&oh=272c997f1febf514a031aefe9cb712cb&oe=609BBCA2" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 2 - Square</h1>
                <p>Hello again!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/167432599_1203101340133695_8518788973824059736_n.png?_nc_cat=107&ccb=1-3&_nc_sid=730e14&_nc_ohc=CItpIApuYmgAX_zHj8t&_nc_ht=scontent.ffco3-1.fna&oh=83145492bb38c8c2148df70086382459&oe=609A928F" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 3 - Horizontal</h1>
                <p>Hello again and again!</p>
            </div>
        </div>
    </div>
</div>

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
</a> 
</div>

CSS

.carousel-indicators > li, .carousel-indicators > li.active {
    width: 100px;
    height: 25px;
    border-radius: 0;
    border: solid 1px grey;
    background: lightgrey;
    text-indent: 0;
}
.carousel-indicators > li.active {
    background: white;
}

#myCarousel {
  width: 500px;
  height: 500px;
}

Answer 1

添加这个

$('#myCarousel').owlCarousel({
    autoHeight:true
});

删除CSS上的高度

#myCarousel {
  width: 400px;
  /*height: 400px;*/ /*remove This*/
}

更新的代码

#myCarousel .img-responsive{
  margin:0 auto;
  max-height:400px;
}

https://jsfidle.net/lalji1051/qnrzuhm2/

更新：-https://jsfidle.net/lalji1051/xmy46z3l/1/