0

I'm trying to make fluid vertical image that fits screen inside of modal like

enter image description here

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>
Theo
  • 57,719
  • 8
  • 24
  • 41
Vasiliy Nikolayev
  • 1
  • 1

2 Answers2

0

  1. Just use the max-height for carousel slider and slider image.

  2. 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>
Saravana
  • 3,389
  • 4
  • 21
  • 37
  • Hmm, maybe i'm doing it wrong, but in this case modal crops image, and leaves middle of it visible. https://imgur.com/a/Y24hqpd. Here is our Codepen: https://codepen.io/anon/pen/qGEEEv – Vasiliy Nikolayev May 06 '19 at 11:25
  • Yes. Another possible way you have to reduce the image size or use the same size of images. – Saravana May 06 '19 at 11:31
  • This solution image will not be squeezed. – Saravana May 06 '19 at 11:31
  • i'm trying to achieve this "reduced size" but i'm not sure how to solve this. I expect image to have reduced size, to fit carousel slide, and to have emptyness on sides of it. https://imgur.com/a/qfqcboe . If screen gets bigger - it has more space to fill, till it gets to width/height proportions based on modal's width. – Vasiliy Nikolayev May 06 '19 at 13:22
  • There are two possible way. One is have to maintain equal height smaller than 500px for all img and second thing make the image part to center,top,bottom view like `object-fit:cover` remaining will be hidden. If we use `position:absolute` for image also top and bottom will be cutoff https://imgur.com/QQXucFp. – Saravana May 07 '19 at 01:50
  • Ok, let's take facebook for example, they keep photos shrunk somehow https://imgur.com/a/PsQxz9R (i doubt that they have lots of images for each screen haha), they use `display: inline-block;` `max-height: 100%;`, `max-width: 100%;`When i apply it to modal and image they are still getting out of the screen bounds. Problem i face now, is if i have modal-lg for example, images are getting "stretched" to width of the modal, than they get their height set regarding to image size. And i'm not sure how to get around it and to have "facebook's logic"... – Vasiliy Nikolayev May 07 '19 at 14:05
  • Yes. I think fb one is the center position absolute as a mentioned earlier. I will make a another snippet. lets see further. – Saravana May 08 '19 at 01:16
  • Dude, If not suitable you can refer and let me know any other example. I don't think if any other possible way have or not. – Saravana May 08 '19 at 01:26
  • well, it did not work, problem is we are facing bootstrap's css, i can show lot's of sites with such gallery, but will it fix our bootstrap's one? i'm not sure. – Vasiliy Nikolayev May 09 '19 at 22:47
  • just send sample link I will go through and tell you. – Saravana May 10 '19 at 01:00
  • https://mobirise.com/bootstrap-4-theme/gallery-template.html this one, it has ```.mbr-gallery .modal-body img { width: 100%; } img { vertical-align: middle; border-style: none; }``` but it's not working at my side – Vasiliy Nikolayev May 10 '19 at 06:28
  • Your example its a jquery plugin you check the auto width `modal-dialog` based on screen size. In my point of view you have to use jquery plugin to get the desired result. – Saravana May 10 '19 at 09:43
  • Well, if i wanted another JQuery plugin i would just destroy all of my stuff and put it there. But all i wanted to do is to fix my own code, and make modal+carousel work like it supposed to, but looks like it won't happen T_T. – Vasiliy Nikolayev May 11 '19 at 01:52
  • you can go with `Magnific popup gallery` it won't affect your bootstrap and modal css. – Saravana May 13 '19 at 00:59
  • Thanks for your effort my man, i guess ill leave it as it is for now and fix it when i get better with bootstrap walkarounds. I'm still pretty sure some styling might fix it. – Vasiliy Nikolayev May 14 '19 at 15:42
  • I am out. lets try your wish. – Saravana May 15 '19 at 02:44
0

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.

Vasiliy Nikolayev
  • 1
  • 1