bootstrap изображение элемента должно занимать полную высоту и не должно изменять размер

Question

Я создаю группу боковых списков недавних блогов с bootstrap 4 в моем приложении angular, но сталкиваюсь с некоторыми проблемами, когда соотношение сторон изменяется на мобильное представление. В некоторых мобильных представлениях изображения изменяются в размерах и становятся меньше, чтобы поместиться в 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>

Answer 1

Измените свой код следующим образом. Это поможет

<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>