如何在轮播中制作相同尺寸的图像?

Question

我有一个轮播，图片有各种大小。 我希望图像以相同的大小显示。通过添加height解决了该问题，但是轮播失去了责任感(当您从移动设备进入时(。这是我的轮播代码：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach($lastPosts as $key => $last)
<div class="item @if($key == 0) active @endif">
<!-- post -->
<div class="post post-thumb">
<a class="post-img" href="/{{ $last->category->path }}/post/{{ $last->id }}"><img src="./img/posts/{{ $last->image->name }}" class="img-responsive d-block w-100" alt=""></a>
<div class="post-body">
<div class="post-category">
<a href="/{{ $last->category->path }}">{{ $last->category->name }}</a>
</div>
<h3 class="post-title title-lg"><a href="/{{ $last->category->path }}/post/{{ $last->id }}">{{ $last->title }}</a></h3>
<ul class="post-meta">
<li>{{ CarbonCarbon::parse($last->date)->format('d '.$months[date('n')].' Y') }}</li>
</ul>
</div>
</div>
<!-- /post -->
</div>
@endforeach
</div>
</div>

我该如何解决这个问题？

Answer 1

你试过引导img-fluid吗？

Bootstrap 中的图像使用 .img-fluid.max-width 进行响应： 100%;和高度：自动;应用于图像，使其缩放 与父元素。

https://getbootstrap.com/docs/4.1/content/images/