title: Crop image in card
body: <p>I've built this horizontal card with an image on the left, and I've specified a min height for the card which is important.</p>
  
  <p>Currently the image fits in the card using width: 100% and height: 100%, but i want it to use the full height of the parent and then crop the width of it.</p>
  
  <p>I am using Bootstrap 4</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="card mb-3 rounded shadow"&gt;
    &lt;div class="row no-gutters"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;img src="{{ course.media[0].fileName }}" class="card-image" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
        &lt;div class="card-body"&gt;
          &lt;span class="badge badge-pill badge-danger"&gt;{{ course.courseNumber }}&lt;/span&gt;
          &lt;h5 class="card-title"&gt;{{ course.name }}&lt;/h5&gt;
          &lt;p class="card-text"&gt;{{ course.description }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>$nav-red: #e51400;
  
  .card {
      max-width: 540px;
      min-height: 200px;
  }
  
  .card-image {
      width: 100%;
      height: 100%;
  }
  
  .card-body span{
      background-color: $nav-red !important;
      float: right;
  }
  </code></pre>