Currently, I am working on integrating a Bootstrap carousel that features centred and auto-resized images. In the JSFiddle example provided (https://jsfiddle.net/koba1/mb94dgzu/6/), you will notice that the first image (a vertical one) stretches to fill the entire div, while the third image remains at the top. My goal is to achieve the same carousel behaviour seen on Facebook or Twitter, where the images are centrally positioned and resize according to the containing div. Can anyone assist me with this?
<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;
}