I am trying to add a bootstrap carousel like the airbnb example. The carousel should remain responsive in all the device sizes. I tried to give a constant height and width to the carousel container and the image. However, the image gets cropped if the viewport height or width is too less.
I want the functionality to be exactly like Airbnb carousel. The image doesn't gets cropped irrespective of the viewport dimensions. The user might have to do a vertical scroll, but the image is visible in its entirety, with correct aspect ratio.
If the image is landscape type (example 1000x200), it should spread across the entire width. The top and bottom areas should have black bezels.
Similarly if the image is portrait type (example 200x1000), it should spread across the entire height. The left and right areas should have black bezels. Here is my code, also pasted on jsfiddle. (Here is rendered version of jsfiddle):
@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>Our problem pages screenshots:
We are trying to make something like this Airbnb Example:
These are some of the images from the Airbnb website.