Bootstrap 5填充抛出图像组的纵横比-前端问题

Bootstrap 5 Padding throwing off Aspect Ratio For Group of Images(Bootstrap 5填充抛出图像组的纵横比)

本文介绍了Bootstrap 5填充抛出图像组的纵横比的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很难与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：

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

中：

请注意，底部不再对齐。填充物没有反应，抛出了比率。有什么更好地解决这个问题的办法吗？

推荐答案

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

您还可以使用bootstrap gutters此处gx-3根据需要设置您的边沟间距

结果。

展开代码段以查看结果

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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="aHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1NTQwODAzNTMtYTU3NmNmODAzYmRhP2l4aWQ9TW53eE1qQTNmREI4TUh4elpXRnlZMmg4TTN4OGNHaHZkRzk4Wlc1OE1IeDhNSHg4JmFtcDtpeGxpYj1yYi0xLjIuMSZhbXA7dz0xMDAwJmFtcDtxPTgw">
        </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="aHR0cHM6Ly9hcHByZW5kcmUtbGEtcGhvdG8uZnIvd3AtY29udGVudC91cGxvYWRzLzIwMTgvMDcvcGhvdG8tdml0ZXNzZS1vYnR1cmF0aW9uLWVsZXZlZV9sYXVyZW50LWJyZWlsbGF0LTEyMDB4OTAwLmpwZw==">
          <img class="img-fluid d-none d-md-block mt-2 ratio ratio-16x9 h-100" src="aHR0cHM6Ly93d3cuZGVzaWduZXIuaW8vd3AtY29udGVudC91cGxvYWRzLzIwMTkvMTAvMS0xMDI0eDY5OC5wbmc=">
        </div>
      </div>    
    </div>
  </section>
  <script src="aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4xLjMvZGlzdC9qcy9ib290c3RyYXAubWluLmpz" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

这篇关于Bootstrap 5填充抛出图像组的纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！