Bootstrap模态框内图片溢出问题求助

问题说明 #

我用Bootstrap创建模态框展示文本和图片时，出现图片溢出模态框的问题。尝试给图片添加img-responsive响应式类未解决问题，移除modal-sm类后，小屏幕上的问题依然存在。

相关代码 #

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
  <div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Upgrade to Basic</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
    <img src="./img/upi.jpg" class="img-responsive"/>
  </div>
    </div>
  </div>
</div>

问题截图 #

• 大屏效果：
  
• 小屏效果：
  

解决方法 #

• 替换响应式类：Bootstrap 3的img-responsive类在Bootstrap 4及后续版本已被替换为img-fluid，该类会设置max-width:100%; height:auto;，确保图片不会超出容器宽度。直接将图片的img-responsive替换为img-fluid即可。
• 添加内边距优化（可选）：若图片紧贴模态框边缘，可给.modal-body添加p-3类设置内边距，避免内容与模态框边界无间隙，同时进一步防止溢出。
• 自定义CSS强制限制（兜底方案）：如果上述方法无效，可添加自定义CSS规则强制约束图片尺寸：

.modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

修改后的示例代码 #

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
  <div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Upgrade to Basic</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body p-3">
    <p>Modal body text goes here.</p>
    <img src="./img/upi.jpg" class="img-fluid"/>
  </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者www.friend0.in