Bootstrap: "img-fluid" class not working correctly-CodePudding

I am doing Colt Steele web dev course and having a problem with the "Museum of candy project" (I changed it up a bit). The thing is that I am using a widescreen monitor and whenever I make my window larger there comes a point where the image stops taking 100% of the column even though I have it set to "". I would expect for it to cover the column completely, anything I can do to fix it? btw, this is my first stackoverlow post

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/[email protected]/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 >
        <div >
          <a  href="#">MUSEUM OF AIRPLANES</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span  ></span>
          </button>
          <div  id="navbarNav">
            <ul >
              <li >
                <a  aria-current="page" href="#">HOME</a>
              </li>
              <li >
                <a  href="#">ABOUT</a>
              </li>
              <li >
                <a  href="#">TICKETS</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <section >
        <div >
            <div ><h2 >MUSEUM OF AIRPLANES</h2></div>
            <div ><img  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/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF TidwNdjvaKZX19NZ/e6oz"
        crossorigin="anonymous"></script>   
</body>
</html>

CodePudding user response：

img-fluid bootstrap class set max-width:100% (of the image). The image dimensions provided in your snippet are 800x548, If the image container is larger than the image width, it wont take the whole space.

CodePudding user response：

In addition to Cédric's answer I would like to add that you can use class w-100 (applies width: 100%;) instead of img-fluid to achieve your expected result.

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/[email protected]/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 >
    <div >
      <a  href="#">MUSEUM OF AIRPLANES</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span  ></span>
          </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  aria-current="page" href="#">HOME</a>
          </li>
          <li >
            <a  href="#">ABOUT</a>
          </li>
          <li >
            <a  href="#">TICKETS</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section >
    <div >
      <div >
        <h2 >MUSEUM OF AIRPLANES</h2>
      </div>
      <div ><img  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/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</body>

</html>