Bootstrap img-fluid类无法完全填充列的问题求助

问题根源在于img-fluid的默认行为：它仅保证图片不超出容器宽度，但如果图片的原始宽度小于宽屏状态下col-md-6的实际宽度，图片会停在自身原始尺寸，不会自动拉伸填充容器。

解决方案1：强制图片占满容器（允许轻微失真） #

给图片添加自定义样式，强制宽度100%以填充容器：

首先在CSS中新增自定义类：

/* 自定义类，强制图片占满容器宽度 */
.img-full-width {
  width: 100%;
  height: auto;
}

然后修改HTML中的图片标签，更新class：

<img class="img-fluid img-full-width" src="你的图片地址" alt="airplanepicture">

解决方案2：替换大尺寸图片（最优，避免失真） #

如果不想让图片拉伸失真，直接替换一张原始宽度足够大的图片（比如宽度≥1200px，确保宽屏时col-md-6的宽度不超过图片原始尺寸）。

修改后的完整代码示例 #

body {
  background-color: lightblue;
  font-family: Roboto, sans-serif;
}

.navbar-brand {
  font-size: 1.7rem;
  color: darkblue;
  font-weight: 600;
}

.nav-link {
  letter-spacing: 1.5px;
  font-size: 1.2rem;
  transition: font-size .2s;
}

.nav-link:hover {
  color: darkblue;
  font-size: 1.3rem;
}

/* 新增自定义类 */
.img-full-width {
  width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<nav class="navbar navbar-expand-md ">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MUSEUM OF AIRPLANES</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon navbar-dark" ></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TICKETS</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h2 class="text-center">MUSEUM OF AIRPLANES</h2>
    </div>
    <div class="col-md-6"><img class="img-fluid img-full-width" src="https://www.heraldweekly.com/wp-content/uploads/2021/10/138756/450px-Short_Skyvan_SC.7_G-BEOL_arrives_at_RIAT_Fairford_12July2018_arp.jpg.pro-cmg.jpg" alt="airplanepicture"></div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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