我明白你的需求：模态框要能根据图片的实际尺寸智能调整——浏览器空间足够就显示原图大小，空间不够就缩到刚好能完整显示（不用滚动），同时还要兼顾不同分辨率的屏幕。下面是具体的解决方案：

核心思路 #

我们需要放弃固定的max-width，改用**视口单位（vw/vh）**来限制模态框的最大尺寸，同时让图片在模态框内自适应，确保不会超出浏览器可视区域。

步骤1：自定义CSS规则 #

添加以下样式来覆盖Bootstrap默认的模态框行为：

/* 让模态框基于视口自适应最大尺寸 */
.modal-img-dialog {
  max-width: 90vw; /* 最大宽度占视口90%，留边距 */
  max-height: 90vh; /* 最大高度占视口90% */
  width: auto; /* 宽度自动适应内容 */
  height: auto; /* 高度自动适应内容 */
}

/* 确保模态内容和主体能自适应高度 */
.modal-img-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal-img-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem; /* 减小内边距，给图片更多空间 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 让图片自适应模态框可用空间 */
.modal-img-body img {
  max-width: 100%;
  max-height: calc(90vh - 80px); /* 减去头部和内边距的高度，避免超出视口 */
  object-fit: contain; /* 保持图片比例，完整显示 */
}

步骤2：修改HTML结构 #

去掉原来的modal-dialog-scrollable，替换成我们自定义的类。如果有多个图片，建议用同一个模态框动态加载图片（避免重复ID，提升性能）：

单个图片的基础示例：

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

<div>
  <a data-bs-toggle="modal" data-bs-target="#image-modal">
    <img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
  </a>
  
  <!-- 自适应图片的模态框 -->
  <div id="image-modal" class="modal">
    <div class="modal-dialog modal-img-dialog">
      <div class="modal-content modal-img-content">
        <div class="modal-header">
          <h5>Full Size artwork</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body modal-img-body">
          <img src="https://via.placeholder.com/1200" class="figure-img border border-dark">
          <figcaption class="mt-2 text-center">1200 x 1200</figcaption>
        </div>
      </div>
    </div>
  </div>
</div>

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

多个图片共用一个模态框的优化方案：

如果页面有很多图片，不用每个图片都做一个模态框，用JS动态替换模态框里的图片源：

<!-- 缩略图列表 -->
<div class="row g-0">
  <div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
    <a class="img-thumbnail-link" data-bs-toggle="modal" data-bs-target="#shared-image-modal" data-img-src="https://via.placeholder.com/1200" data-img-caption="1200 x 1200">
      <img src="https://via.placeholder.com/400" class="img-fluid border border-dark">
    </a>
  </div>
  <div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
    <a class="img-thumbnail-link" data-bs-toggle="modal" data-bs-target="#shared-image-modal" data-img-src="https://via.placeholder.com/800" data-img-caption="800 x 800">
      <img src="https://via.placeholder.com/400" class="img-fluid border border-dark">
    </a>
  </div>
</div>

<!-- 共用的模态框 -->
<div id="shared-image-modal" class="modal">
  <div class="modal-dialog modal-img-dialog">
    <div class="modal-content modal-img-content">
      <div class="modal-header">
        <h5>Full Size artwork</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body modal-img-body">
        <img id="modal-display-img" class="figure-img border border-dark">
        <figcaption id="modal-img-caption" class="mt-2 text-center"></figcaption>
      </div>
    </div>
  </div>
</div>

<script>
// 监听模态框显示事件，动态加载图片
document.getElementById('shared-image-modal').addEventListener('show.bs.modal', function (event) {
  const button = event.relatedTarget; // 点击的缩略图链接
  const imgSrc = button.getAttribute('data-img-src');
  const imgCaption = button.getAttribute('data-img-caption');
  
  // 更新模态框里的图片和标题
  const modalImg = document.getElementById('modal-display-img');
  const modalCaption = document.getElementById('modal-img-caption');
  modalImg.src = imgSrc;
  modalCaption.textContent = imgCaption;
});
</script>

方案说明 #

• 视口单位（vw/vh）：90vw和90vh保证模态框不会占满整个屏幕，留10%的边距，适配各种屏幕尺寸。
• Flex布局：让模态框内容能垂直自适应，确保图片居中显示，同时利用flex:1让modal-body占据剩余空间。
• 图片自适应：max-height: calc(90vh - 80px)减去了modal-header的高度和内边距，确保图片不会超出视口，object-fit: contain保证图片比例不变，完整显示。
• 动态加载优化：多个图片共用一个模态框，避免重复DOM，提升页面性能。

这样调整后，不管图片是400px、500px还是1200px，模态框都会自动适应：浏览器空间足够就显示原图大小，空间不够就缩到刚好能完整显示（不需要滚动），完美符合你的需求。

内容的提问来源于stack exchange，提问作者Paul Taylor