引导元素图像应采用全高且不应调整大小答案

【问题标题】：bootstrap element image should take full height and shouldnot resize引导元素图像应采用全高且不应调整大小
【发布时间】：2020-03-13 20:06:33
【问题描述】：

我正在我的 Angular 应用程序中使用 bootstrap 4 设计一个最近博客的侧面列表组，但是当纵横比更改为移动视图时会遇到一些问题。在某些移动视图中，随着标题变大，图像正在调整大小并变小以适应 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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案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>

【讨论】：