如何将带有轮播图像的 bootstrap4 模态加载到页面中？答案

【问题标题】：How to fit bootstrap4 modal with carousel image to page?如何将带有轮播图像的 bootstrap4 模态加载到页面中？
【发布时间】：2019-09-23 08:51:33
【问题描述】：

我正在尝试制作适合模式内屏幕的流畅垂直图像喜欢

但是，相反，如果图像大于屏幕尺寸，它会开始从屏幕中弹出并可以滚动，而水平的则一切正常。

我试着玩.imageHeight 类。

我已经为图片添加了：

当我添加 max-height: 300px; 时，图像被压扁了，
max-height 100% 什么都没做，
添加image-fluidclass 似乎根本不起作用，
试过object-fit: scale-down;，但它似乎让图片变小了但仍然不适合屏幕。

我在这里创建了 Codepen：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>

【问题讨论】：

标签： css bootstrap-4 bootstrap-modal bootstrap-carousel

【解决方案1】：

好的，我现在知道如何解决这个问题了：首先我们必须在图片周围添加 div，将其放入轮播中，然后在该 div 中调整图片的位置。

【讨论】：

【解决方案2】：

只需将max-height 用于轮播滑块和滑块图像。
使用object-fit:cover，图像将填充其框的高度和宽度，再次保持其纵横比，但在此过程中经常裁剪图像。

可选地，我已经使用@media 进行响应，稍后您可以根据您的要求调整max-height。

.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>

使用position:absolute方法：

.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>

【讨论】：

嗯，也许我做错了，但在这种情况下，模态裁剪图像，并使其中间可见。 imgur.com/a/Y24hqpd。这是我们的 Codepen：codepen.io/anon/pen/qGEEEv
是的。另一种可能的方法是您必须减小图像大小或使用相同大小的图像。
这个解决方案图片不会被压缩。
我正在尝试实现这种“减小尺寸”，但我不确定如何解决这个问题。我希望图像尺寸减小，以适合旋转木马幻灯片，并在其两侧留空。 imgur.com/a/qfqcboe 。如果屏幕变大 - 它有更多空间可以填充，直到它达到基于模态宽度的宽度/高度比例。
有两种可能的方式。一是必须为所有 img 保持小于 500px 的相等高度，二是使图像部分居中、顶部、底部视图，如 object-fit:cover 剩余的将被隐藏。如果我们使用position:absolute 作为图像，顶部和底部也将被截断imgur.com/QQXucFp。