How to set all images height the same but keep responsiveness - html

Question

I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?
I wrote the following code containing the images:
<div class="container container-margin">
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/battleport.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">Battleport</h6>
<p><i>Study</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/crmfabriek.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">CRM Fabriek</h6>
<p><i>Business</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-thrid">
</div>
</div>
Besides that I've looked at the following topics
How to keep responsive images same height?
How can I make all images of different height and width the same via CSS?
Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?

Answer 1

Not sure if this is what you are looking for, but might be the fix.
div{
width: 100%;
text-align: center;
}
img{
max-width:100%;
max-height: 300px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>

Answer 2

I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.