Equal Height Images in Flexbox

Question

I'm trying to create a series of flexboxes with an image and text beneath. I'd like all the image heights to align, however, all the source images are of different sizes.

I searched around here and found this to be essentially the same issue, but the solution doesn't seem to work for me.

Here's what I have:

CSS:

.roster {
    display: flex;
    flex-wrap: wrap;
}

.roster-card {
    display: flex;
    flex-direction: column;
    margin: 10px;
    border: 1px solid grey;
    box-shadow: 1px 1px 3px #888;
    width: 100%;
}

.roster-card img {
    width: 100%;
    height: auto;
}

.roster-card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.4em;
}

HTML:

<div class="roster">
    <div class="roster-card">
        <img src="">
        <div class="roster-card-content">
            <h3>Name</h3>
            <p>Title</p>
            <p>Location</p>
            <p><a href="">Link</a></p>
        </div>
    </div>    
    <div class="roster-card">
        <img src="">
        <div class="roster-card-content">
            <h3>Name</h3>
            <p>Title</p>
            <p>Location</p>
            <p><a href="">Link</a></p>
        </div>
    </div>    
    <div class="roster-card">
        <img src="">
        <div class="roster-card-content">
            <h3>Name</h3>
            <p>Title</p>
            <p>Location</p>
            <p><a href="">Link</a></p>
        </div>
    </div>
</div>

Media Queries (if it matters):

@media all and (min-width: 40em) {
    .roster-card {width: calc(30% - 10px);}
    .roster-card p, .roster-card p a {font-size: 0.9em; line-height: 120%;}
}

Answer 1

You want to have equals height for each of your images ?

Well you write height : auto so the height is the normal height of the image. You should define a height for exemple : height: 200px . At the moment your image is deform cause you define a width AND a height, you should know use object-fit : contain or object-fit : cover to keep proportion