Make images same height when there is no fixed height or width-CodePudding

Is there are any solution to make different size images be the same height on a card? Problem is that content is coming from cms, and I do not know what the image size will be and 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 will be" class="img-fluid"
                         alt="image">
            </div>
        <div class="d-flex flex-column col-12 flex-grow-1 px-0">
                <div class="mb-auto">Will be content...</div>
                <a href="link" class="btn card-btn btn-outline-secondary" 
                   role="button">Button</a>
        </div>
    </div>
</div>

Here is how it looks now:

example here

images could be higher or lower. Can't fix them in px. I need that card will stretch, not image making shorter.

CodePudding user response：

Add these in your code "

<div class="col-12 d-flex justify-content-center px-0 mb-2 h-100">
        <img src="image link will be" style="object-fit: contain;"
             alt="image">
</div>

CodePudding user response：

try this code

       .img-fluid {
             height:400px;
             object-fit-cover;
             }