How to fit bootstrap4 modal with carousel image to page? - css

Question

I'm trying to make fluid vertical image that fits screen inside of modal
like
But instead, if the image is higher than the screen size, it starts bursting out of the screen with the ability to scroll it, while it's all fine with horizontal ones.
I tried playing with .imageHeight class.
I've added for images:
when i added max-height: 300px;, it squished image,
max-height 100% didn't do anything at all,
adding image-fluidclass does not seem working at all,
tried object-fit: scale-down;, but it seemed making picture smaller
but still not fitting screen.
I created Codepen here: https://codepen.io/anon/pen/mYdyrO
.imageHeight {
max-height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>

Answer 1

Just use the max-height for carousel slider and slider image.
Use of object-fit:cover the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
Optionally I have used the #media for responsive later you can adjust max-height based on your requirement.
.imageHeight {
max-height: 460px;
object-fit: cover;
-o-object-fit: cover;
}
.carousel.slide {
max-height: 460px;
}
#media (max-width:767px) {
.imageHeight {
max-height: 260px;
object-fit: cover;
-o-object-fit: cover;
}
.carousel.slide {
max-height: 260px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
Using position:absolute method:
.carousel-item {
padding-bottom: 56%;
overflow: hidden;
position: relative;
}
.imageHeight {
object-fit: cover;
-o-object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="block4">
<div class="row mt-5">
<div class="col-sm text-center align-middle">
<h1>Doors</h1>
</div>
</div>
<div class="row py-2">
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="0">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="1">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="2">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="3">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="4">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
<div class="col-sm text-center align-self-center py-2">
<a href="#carousel4" data-slide-to="5">
<img src="https://clayui.com/images/thumbnail_placeholder.gif" class="image-detail" data-toggle="modal" data-target="#lightbox4">
</a>
</div>
</div>
<div id="lightbox4" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl modalCenter" role="document">
<!--modal-xl modal-lg-->
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" id="carousel4" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="1" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="2" class="pointer car_item active"></li>
<li data-target="#carousel4" data-slide-to="3" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="4" class="pointer car_item"></li>
<li data-target="#carousel4" data-slide-to="5" class="pointer car_item"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item active">
<img class="d-block w-100 img-fluid imageHeight" src="https://media-cdn.tripadvisor.com/media/photo-s/09/f4/fe/38/horizontal.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageHeight" src="https://thebig.co/images/blogs/vertical_panorama02.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>

Answer 2

Ok, i understand how to fix this now: First we have to add div around picture, fit it into carousel, and play with image's positioning inside of that div.