I am attempting to implement a responsive bootstrap carousel similar to the one showcased in the airbnb example. My challenge lies in ensuring that the carousel remains responsive across all device sizes. I have tried setting fixed height and width for both the carousel container and image, but encountered cropping issues when viewport dimensions are too small.
The objective is to replicate the functionality of the Airbnb carousel where images do not get cropped, regardless of the viewport size. Users may need to scroll vertically, but the entire image with correct aspect ratio should be visible without cropping.
For landscape images (e.g., 1000x200), they should span the full width with black bezels at the top and bottom. Likewise, portrait images (e.g., 200x1000) should stretch to the full height with black bezels on the sides. Here is my code, also available on jsfiddle. You can view the rendered version on this link:
@media screen and (min-width: 500px) {
.commonattr {
min-width: 100%;
}
}
@media screen and (min-width: 768px) {
.commonattr {
min-width: 400px;
}
}
@media screen and (max-height: 400px) {
.carouseltest {
height: 60vh;
}
}
.cardcontainer {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
}
.carouselcontainer {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
object-fit: contain;
/* max-width: none; */
width: max-content;
}
#carouselExampleIndicators {
/* min-width: 300px; */
width: 100vw;
margin: 0 auto
}
#carousel-bg {
background-color: black;
}
.carousel-item {
z-index: 2;
object-fit: cover;
}
.carouseltest {
z-index: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.8)10%, rgba(0, 0, 0, 0)30%);
box-sizing: border-box;
/* height: 600px; */
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.theimage {
z-index: -1;
width: 100%;
}
@media screen and (min-width: 420px) {
#carouselExampleIndicators {
background: white;
display: flex;
width: 25vw;
height: 100%;
flex-direction: column;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="cardcontainer">
<div class="carouselcontainer commonattr">
<div class="carouselslidecontainer commonattr">
<div id="carouselExampleIndicators" class="carousel slide commonattr" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active w-100"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class="w-100"></li>
</ol>
<div class="carousel-inner" role="listbox" id="carousel-bg">
<div class="carousel-item item active">
<div class="carouseltest">
<img class="theimage" src="images/8.jpg" alt="First slide">
</div>
</div>
<div class="carousel-item item ">
<div class="carouseltest">
<img class="theimage" src="images/600x100.png" alt="Second slide">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>Screenshots of our problematic pages:
We aim to achieve a layout similar to the Airbnb Example:
These images are sourced from the Airbnb website.