bootstrap element image should take full height and shouldnot resize - html

Question

I'm designing a side list-group of recent blogs with bootstrap 4 in my angular application but facing some problems when the aspect ratio is changed to mobile view. In some mobile view the images are resizing and getting smaller to fit into the div as the title gets bigger. I want the title to resize and if it's too long, then should break and get into next line but all the image size should remain same. Also I want the image to take the full height of the element. Please look at the image below to have a better understanding.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<h6 class="text-muted">Recent Blogs</h6>
<ul class="list-group" *ngFor="let blog of blogs">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="image-parent">
<a [routerLink]="['/blog', blog.blogId]">
<img src="http://localhost:4000/{{blog.imagePath}}" class="img-fluid" alt="lay">
</a>
</div>
<a [routerLink]="['/blog', blog.blogId]">
{{blog.title}}
</a>
</li>
</ul>
</div>
</div>
</div>

Answer 1

Change your code like this. It'll help
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<h6 class="text-muted">Recent Blogs</h6>
<ul class="list-group" *ngFor="let blog of blogs">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="row">
<div class="col-md-4">
<div class="image-parent">
<a>
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg" class="img-fluid" alt="lay">
</a>
</div>
</div>
<div class="col-md-8">
<a>
Text Test
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>