title: Responsive card image with fixed height in bootstrap 4
body: <p>I have an image with a resolution of 760x270, for example, but this ratio makes it look too thin and I want it to look more like a square. However, if I put a more square-ish image with a resolution 760x500 for example, I want it to still fit and not distort. How can I do this?</p>
  
  <pre><code>&lt;div class="col-xs-6 col-md-4"&gt;
                          &lt;div class="card"&gt;
                              &lt;img class="card-img-top img-fluid" src="img/1.jpg" alt="Card image cap"&gt;
                              &lt;h4 class="card-title"&gt;Title&lt;/h4&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;p class="card-text"&gt;Some quick example text to build on &lt;/p&gt;
                                  10 mins ago &lt;div class="float-right"&gt;&lt;i class="fa fa-comment-o" aria-hidden="true"&gt;&lt;/i&gt; 0&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
  </code></pre>