title: Fill Remaining Column Space With Image
body: <p>Hello I am working on a mockup with Bootstrap 4. I am wondering how I can fill in the remaining space of this red bordered column without distorting the image?</p>
  
  <p>I am currently using img-fluid to keep it responsive, but to my understanding this only fills the full width of it's container therefore leaving whitespace for the height.</p>
  
  <p><a href="https://i.stack.imgur.com/6O2yf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6O2yf.jpg" alt="Example"></a></p>
  
  <pre><code>      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;div class="container"&gt;
              &lt;h3&gt;COMMAND THE ROAD&lt;/h3&gt;
              &lt;p&gt;The power and driving dynamics of the all-new 2020 Explorer come wrapped in an eye-catching design that
                boasts
                authentic comfort and style. And because it was built for the active lifestyle, you can also expect an
                interior
                space that accommodates the kids, the dog, the sports equipment, camping gear and just about anything else
                you
                may need on the road to adventure.
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;img src="img/20_FRD_EPR_400079_1_.jpg" class="img-fluid overflow-hidden"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>