Html 引导元素图像应为全高且不应调整大小

在我的angular应用程序中，我正在设计一组最近使用bootstrap 4的博客，但是当纵横比更改为mobile view时，我会遇到一些问题。在一些移动视图中，随着标题变大，图像正在调整大小并变小以适应div。我想调整标题的大小，如果它太长，那么应该打破进入下一行，但所有的图像大小应保持不变。此外，我希望图像采取的元素的全部高度。请看下图以便更好地理解

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>

最近的博客


像这样更改代码。这会有帮助的



最近的博客


文本测试