Bootstrap 5 填充丢弃图像组的纵横比答案

【问题标题】：Bootstrap 5 Padding throwing off Aspect Ratio For Group of ImagesBootstrap 5 填充丢弃图像组的纵横比
【发布时间】：2021-12-13 02:24:51
【问题描述】：

我很难处理 1 行跨度/2 行 2 列布局中的 3 张图像（请查看图片）。我可以让它在一个分辨率下看起来很完美，但是在其他断点中查看它，由于静态填充大小，比例变得完全错误。

代码：

<section>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-5 text-center">
          <img class="img-fluid ratio ratio-1x1" src="/assets/mood1-8dc4fbf7f86401c523a66983158d7366ce7b41c40b9b568c9a79f2455ae983f4.png">
        </div>
        <div class="col-md-5 d-flex flex-column">
          <img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9" src="/assets/mood2-6b77bce1c8930fd5638d4d982b0c01b357dc38d6212588db2ef12ef67dc8f0e4.png">
          <img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9" src="/assets/mood3-1baca87fe953122237237cbe216e5574d0b6b8b0af20b14057c93281f10d426b.png">
        </div>
      </div>    
    </div>
  </section>

XXL：

注意两列中图像的底部和顶部如何完美对齐。

中等：

注意底部不再对齐。填充没有响应，从而降低了比率。有什么想法可以更好地解决这个问题？

【问题讨论】：

标签： html css bootstrap-5 responsiveness

【解决方案1】：

将 h-100 添加到您的图片可能会有所帮助。

您也可以在此处使用bootstrap gutters gx-3，根据需要设置排水沟间距

结果。

展开 sn-p 看看结果

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section>
    <div class="container">
      <div class="row justify-content-center gx-3">
        <div class="col-5 text-center">
          <img class="img-fluid ratio ratio-1x1 h-100" src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGhvdG98ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
        </div>
        <div class="col-md-5 d-flex flex-column">
          <img class="img-fluid d-none d-md-block mb-2 ratio ratio-16x9 h-100" src="https://apprendre-la-photo.fr/wp-content/uploads/2018/07/photo-vitesse-obturation-elevee_laurent-breillat-1200x900.jpg">
          <img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9 h-100" src="https://www.designer.io/wp-content/uploads/2019/10/1-1024x698.png">
        </div>
      </div>    
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

【讨论】：

你太棒了！谢谢！仅供参考，ratio 和 ratio-16x9 似乎被忽略了。我删除了这两个，只使用了 h-100，一切正常。谢谢！
不客气。你也可以重写 ratio css .. 如果我的回答没问题，想想我 :)