Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card.
<div class="card">
<div class="card-body h-100">
<div class="row d-flex h-100 mx-0">
<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
<img src="image link here" class="img-fluid"
alt="image">
</div>
<div class="d-flex flex-column col-12 flex-grow-1 px-0">
<div class="mb-auto">Dynamic content here...</div>
<a href="link" class="btn card-btn btn-outline-secondary"
role="button">Button</a>
</div>
</div>
</div>
This is how it appears currently:
The images may vary in height. It's necessary for the card to stretch rather than make the images shorter.