Bootstrap 5 Padding导致组图布局宽高比错乱该如何解决？

问题根因 #

• ratio类使用错误：Bootstrap原生的ratio比例组件必须作用于图片的外层容器，直接添加在<img>标签上无法触发内置的padding比例计算逻辑，导致宽高比失效
• 固定边距无响应式特性：mt-2/mb-2为固定像素间距，不同断点下左右两列的总高度计算偏差随分辨率变化放大，最终出现上下不对齐问题
• 列宽断点规则不统一：左列使用全断点生效的col-5，右列仅md以上生效col-md-5，断点切换时布局逻辑错位

优化实现代码 #

<section>
  <div class="container">
    <div class="row justify-content-center g-4">
      <!-- 左侧1:1大图列 -->
      <div class="col-12 col-md-5">
        <div class="ratio ratio-1x1">
          <img class="img-fluid object-fit-cover" src="/assets/mood1-8dc4fbf7f86401c523a66983158d7366ce7b41c40b9b568c9a79f2455ae983f4.png" alt="mood1">
        </div>
      </div>
      <!-- 右侧两张16:9图列 -->
      <div class="col-12 col-md-5 d-flex flex-column justify-content-between gap-3 gap-md-4">
        <div class="ratio ratio-16x9">
          <img class="img-fluid object-fit-cover" src="/assets/mood2-6b77bce1c8930fd5638d4d982b0c01b357dc38d6212588db2ef12ef67dc8f0e4.png" alt="mood2">
        </div>
        <div class="ratio ratio-16x9">
          <img class="img-fluid object-fit-cover" src="/assets/mood3-1baca87fe953122237237cbe216e5574d0b6b8b0af20b14057c93281f10d426b.png" alt="mood3">
        </div>
      </div>
    </div>    
  </div>
</section>

优化点说明 #

• 统一列宽规则：左右列均设置为小屏100%宽度堆叠、md及以上各占5列，断点切换时布局逻辑一致
• 正确使用比例组件：所有图片外层套ratio容器，宽高比计算逻辑全局生效，不受分辨率影响
• 响应式间距替代固定边距：用flex容器的gap属性控制两张图片的间距，支持响应式设置（小时间距3，md以上间距4），避免固定margin的高度计算偏差
• 自动对齐逻辑：右侧flex列添加justify-content-between，自动分配上下空间，保证左右两列的上下边缘永远齐平
• 添加object-fit-cover保证图片填充比例容器时不会变形，多余部分自动裁剪，也可根据需求替换为object-fit-contain

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