如何让图片占满Bootstrap模态框容器？

你当前的设置只给modal-content指定了最大高度，但modal-content包含了头部、主体和底部三个区域，直接给modal-body设100%的最大高度会忽略头部和底部的占用空间，导致主体内容（比如长图）超出容器范围。

修复方案 #

通过Flex布局让modal-body自动填充剩余空间，并给主体添加滚动属性：

.modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
}

代码说明：

• display: flex; flex-direction: column：让modal-content的子元素垂直排列，自动分配容器内的空间
• flex-grow: 1：让modal-body占据modal-content中除头部和底部之外的所有剩余高度
• overflow-y: auto：当modal-body内的内容（如长图）超出高度时，自动显示垂直滚动条，不会突破容器边界

完整代码示例 #

CSS

.modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
}

HTML

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

<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
        <p class="modalText text-dark text-center mt-2">image description</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者5dswasntthatbad