title: Image not fully responsive despite of using 'img-fluid' class
body: <p>I used <code>img-fluid</code> class inside my img tag but my image is not fully responsive. It is responsive for smaller screen but becomes unresponsive after the screen is enlarged to a certain dimension.</p>
  
  <p>I've read <a href="https://stackoverflow.com/questions/34289815/how-to-make-an-image-responsive-using-bootstrap-without-having-it-take-up-the-en">How to make an image responsive using bootstrap without having it take up the entire width of the division?</a> and <a href="https://stackoverflow.com/questions/37548489/bootstrap-img-responsive-vs-img-fluid">Bootstrap: img-responsive vs img-fluid</a> but couldn't solve the issue.</p>
  
  <p>Here's how I tried</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>    &lt;!-- THE HEADER --&gt;
      &lt;div class="container-fluid header"&gt;
          AUST CSE
      &lt;/div&gt;
      &lt;!-- IMAGE JUST BELOW HEADER --&gt;
      &lt;div class="wrapper" style="background: blue"&gt;
          &lt;img src="images2/banner.jpg" class="img-fluid"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>    .wrapper {
          width: 100%;
      }
  </code></pre>
  
  <p>In smaller screens, the page looks like this: 
  <a href="https://i.stack.imgur.com/YUX2j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUX2j.png" alt="enter image description here"></a> 
  however, in larger screen, the image don't occupy 100% of the space and looks like this: 
  <a href="https://i.stack.imgur.com/mh9Zy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mh9Zy.png" alt="enter image description here"></a>
  I want the image to occupy 100% of the width and scale up its height, just like it does when the screen is smaller.</p>