引导程序：“img-fluid”类无法正常工作答案

【问题标题】：Bootstrap: "img-fluid" class not working correctly引导程序：“img-fluid”类无法正常工作
【发布时间】：2022-10-05 00:49:36
【问题描述】：

我正在上 Colt Steele 网络开发课程，但对“糖果博物馆项目”有疑问（我对其进行了一些修改）。问题是我使用的是宽屏显示器，每当我放大窗口时，即使我将其设置为class="img-fluid"，图像也会停止占列的 100%。我希望它完全覆盖该列，我能做些什么来修复它？

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;
}

<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 mr-0" 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>

【问题讨论】：

标签： javascript html css image bootstrap-5

【解决方案1】：

img-fluid 引导类集 max-width:100%（图像的）。您的 sn-p 中提供的图像尺寸为 800x548，如果图像容器大于图像宽度，则不会占用整个空间。

【讨论】：

【解决方案2】：

除了Cédric 的answer 我想补充一点，您可以使用w-100 类（适用width: 100%;）而不是img-fluid 来实现您的预期结果。

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Museum of airplanes</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="museumofairplanes.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

</head>

<body>
  <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="w-100 mr-0" 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>
</body>

</html>

【讨论】：