Using the default carousel from Bootstrap template has been working well for me. However, I've encountered an issue where resizing the browser window distorts the image aspect ratio by squishing it horizontally.
I've tried various solutions to maintain the image aspect ratio while resizing the window, and the code below is the closest I've come to achieving that. But unfortunately, when the window size is reduced to that of a mobile phone, the image height becomes too small to decipher.
What I'm aiming for is a responsive carousel similar to the one on this website:
Here is my current code for the carousel:
<!-- carousel-->
<div id="myCarousel" data-ride="carousel" class="carousel slide">
<!-- Indicators-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active"><img src="../images/carousel_resize_3.jpg" alt="First slide" class="img-responsive"/>
<div class="container">
<div class="carousel-caption">
<h1>text1</h1>
<p></p>
<p><a href="/login" role="button" class="btn btn-lg btn-warning">Sign up today</a></p>
</div>
</div>
</div>
<div class="item"><img src="../images/carousel_resize_1.jpg" alt="Second slide" class="second-slide"/>
<div class="container">
<div class="carousel-caption">
<h1>text2</h1>
<p></p>
<p><a href="#moreInfo" role="button" class="btn btn-lg btn-warning">Learn more</a></p>
</div>
</div>
</div>
<div class="item"><img src="../images/carousel_resize_2.jpg" alt="Third slide" class="third-slide"/>
<div class="container">
<div class="carousel-caption">
<h1>text3</h1>
<p></p>
<p><a href="#appInfo" role="button" class="btn btn-lg btn-warning">Browse jobs</a></p>
</div>
</div>
</div>
</div><a href="#myCarousel" role="button" data-slide="prev" class="left carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a href="#myCarousel" role="button" data-slide="next" class="right carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
</div>
<!-- /.carousel-->
Here's my CSS:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
/*height: 500px;*/
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
/*height: 500px;*/
background-color: #777;
}
/*.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}*/
I have referenced multiple Stack Overflow posts for solutions but haven't been able to achieve a responsive carousel with maintained aspect ratio. What am I overlooking?
Thank you for your assistance!
EDIT:
I was able to preserve the aspect ratio with the following code, but now the carousel does not resize as a whole when the browser is resized. Any suggestions on how to fix this?
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 500px;
}
img {
height: 500px;
width: 1920px;
/*object-fit: contain;*/
object-fit: cover;
}