如何制作Bootstrap 5模式拟合图像内容？

Question

我有一个网页，该网页显示一个尺寸为400x400px的图像，如果它们单击图像，那么我希望它以模态显示，

该模态大小以适应模式出现的图像的实际尺寸，但默认为500px，图像（来自 https：//getbootstrap.com/doc.com/docs/5.2/组件/模态/＃FullScreen-Modal ）。如果图像大于我希望模态更大的图像，并且如果我希望模态较小，我将看不到如何做到这一点。我注意到您还可以使用 modal-fullscreen 获得全屏图像，但这对我没有帮助。

肯定可以使模态能够适应数据

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div>
  <a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
    <img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
  </a>

  <div id="full_size_image_dialog" class="modal">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5>
            Full Size artwork
          </h5>
        </div>
        <div class="modal-body">
          <img src="https://via.placeholder.com/500" class="figure-img img-fluid border border-dark">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

edit

所以我在如何根据内容进行动态调整twitter bootstrap模式</

>模态二元格的bootstrap类

<div id="full_size_image_dialog" class="modal">
    <div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5>
                    Full Size artwork
                </h5>
            </div>
            <div class="modal-body">
                <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                <figcaption>
                    1200 x 1200
                </figcaption>
            </div>
        </div>
    </div>
</div>

问题是，如果图像的实际高度大于浏览器窗口的高度，则必须垂直滚动图像

​要显示全尺寸，但前提是在浏览器中足够的空间时，否则显示最大尺寸，可以显示它而无需垂直滚动。我可以为最大宽度设置一个较低的值，以便在我的窗口上工作，但是对于具有更大分辨率窗口的用户来说，这并不是一个很好的选择。

它确实可以防止侧向滚动，因此，如果窗口的宽度太小而无法显示整个图像，它将相应地收缩图像，我们可以合理地假设图像通常是正方形的。

因此，我尝试的解决方案是使用引导程序容器系统使用Col-Md，Col-XL Ectera设置不同屏幕宽度的不同 max Width 大小。但是麻烦是从 help Windows需要在模态 div中使用自己的容器在模态范围之外。

我尝试仅使用主页容器，但每次都使用第一个对话框代码，即它永远不会使用超过700px的最大宽度

<div class="row g-0">
    <div class="col p-2">
        <div id="full_size_image_dialog" class="modal">
            <div class="modal-dialog modal-dialog-scrollable" style="max-width : 700px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>
                            Full Size artwork
                        </h5>
                    </div>
                    <div class="modal-body">
                        <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                        <figcaption>
                            1200 x 1200
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md p-2">
        <div id="full_size_image_dialog" class="modal">
            <div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>
                            Full Size artwork
                        </h5>
                    </div>
                    <div class="modal-body">
                        <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                        <figcaption>
                            1200 x 1200
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row g-0">
    <div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
        <a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
            <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="img-fluid border border-dark">
        </a>
    </div>

Answer 1

目前，这是我只使用CSS提出的最佳解决方案：

.modal-dialog {
  max-width: max-content !important;
}

.modal-body {
  display: flex;
}

.modal-body img {
  object-fit: contain;
}

唯一的问题是，当屏幕高度较小的图像高度时，白色条在图像的左侧和右侧出现。

这是因为 object-fit：contun; 样式，我将其添加到图像中以维护原始纵横比。如果删除此样式，则白色条将消失，但是当高度缩小时，图像不会保持其初始纵横比。

JS小提琴： https://jsfiddle.net/hvaosw5j/