title: How to make Bootstrap's .card-img-top equal height at responsive widths?
body: <p>I am presenting a series of Bootstrap 4 cards like this...</p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;!-- column --&gt;
    &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2"&gt;
        &lt;!-- card --&gt;
        &lt;div class="card rounded-0 w-100 bg-white"&gt;
            &lt;a href="http://www.example.com/destination.html"&gt;
              &lt;img src="http://www.www.example.com/images/photo.jpg" class="card-img-top img-responsive w-100"&gt;
            &lt;/a&gt;
            &lt;div class="card-body"&gt;
              &lt;h6 class="card-title"&gt;Bookish Blaenavon opens new chapter&lt;/h6&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- end card --&gt;
    &lt;/div&gt;
    &lt;!-- end column --&gt;
  
    &lt;! -- more of the same cards here +++ --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>All the images may be of unequal dimensions, but, through their class <code>.card-img-top</code>, should appear at a consistent size.</p>
  
  <p><strong>Width:</strong></p>
  
  <p>FYI - To tackle width, I have already added <code>.w-100</code> to <code>.card</code> and also to <code>img</code>, though I think the latter may be superfluous.</p>
  
  <p>Also, my stylesheet applies <code>object-fit: cover;</code> to <code>.card-img-top</code>.</p>
  
  <p>It seems to work fine, and means I don't have to use a card deck to force consistency. I'm happy, if it's legit.</p>
  
  <p><strong>Card Height:</strong></p>
  
  <p>FYI - To force equal-height cards despite the length of their content, you see I am applying <code>d-flex align-items-stretch</code> in the column. Again, happy.</p>
  
  <p><strong>Image Height:</strong></p>
  
  <p><em>My problem lays here, however.</em></p>
  
  <p>To tackle this, I have applied a <code>height</code> CSS attribute to <code>.card-img-top</code>...</p>
  
  <pre><code>/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
  .card-img-top {
      height: 11vw;
      object-fit: cover;
  } 
  </code></pre>
  
  <p>The problem is, at every browser width, the <code>img</code> stays the same height. That makes it look stupidly short at <code>sm</code>, for instance. See this animated example...</p>
  
  <p><a href="https://i.stack.imgur.com/EJmzP.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EJmzP.gif" alt="enter image description here"></a></p>
  
  <p>How can I ensure that the image height is really responsive, ie. that its height changes at different breakpoints?</p>
  
  <p>Is there a way to do this using Bootstrap 4 stuff, rather than write media-query code to replicate the same widths it uses?</p>
  
  <p>Does anything I'm doing for width mitigate against the outcome for height?</p>