Resize image dynamically based on text height

I want to make a user card for the front-end im currently making and our/my approach for that was to resize the user image based on the width given, but we noticed especially on large screens the Image gets really big while the text remains small.

I created a small mock-up in adobe xd how I image it to look like : User-Card Mockup

What is common approach to this? The only way I could imagine is to make a media query every 100 or 200px and that would be annoying as you can imagine. This can't be that annoying right?

We're using Angular with SCSS and also used a lot of Bootstrap 4 but kinda want to get away from bootstrap.

This is the HTMl of our component before I tried changing it :

<div class="mb-3" style="cursor: pointer;" (click)="openModal(user)">
<div class="row" >

    <div class="col-lg-6 col-sm-6">
        <img class="rounded" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
    </div>

    <div class="col-lg-6 col-sm-6 ml-n4 w-100">
        <h3 [title]="user.name" class="text mb-0 border-bottom w-100 trunc"></h3>
        <div>
            <h4 class="text mb-0"></h4>
            <h6 class="text mb-0">Liquid error: wrong number of arguments (given 1, expected 2)</h6>
            <span class ="badge badge-primary"></span>
        </div>
    </div>

</div>

I hope this question isn't that stupid.