I'm working on achieving a specific design, as shown in the image https://i.sstatic.net/GRjwo.jpg
In Bootstrap 4, it's simply a group of cards with the "card-img-overlay" class. The issue arises when the height of the card is dependent on the image height.
I believe adjusting the card height dynamically based on the image could solve this problem so that all cards with background images have uniform heights. Additionally, I'm looking for a way to place the image inside the card without distorting its aspect ratio.
The example image demonstrates how the background image is cropped to fit inside the card instead of stretching to cover it entirely.
Below is an example code snippet:
<div class="card text-white style="width: 10rem;">
<img class="card-img" src="/images/1.jpg" alt="Card image">
<div class="card-img-overlay text-white d-flex flex-column justify-content-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.
</p>
<p class="card-text">Last updated 3 mins ago</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>