如何在相同大小的轮播中制作图像？答案

【问题标题】：How to make images in carousel of the same size?如何在相同大小的轮播中制作图像？
【发布时间】：2019-03-25 15:21:57
【问题描述】：

我有一个轮播，图像有各种尺寸。我希望图像以相同的尺寸显示。通过添加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>{{ \Carbon\Carbon::parse($last->date)->format('d '.$months[date('n')].' Y') }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- /post -->
                </div>
                @endforeach

              </div>
            </div>

我该如何解决这个问题？

【问题讨论】：

请添加一个工作演示/sn-p，其中呈现 HTML 和实际图像大小。

标签： css laravel bootstrap-4 styles

【解决方案1】：

你试过引导 img-fluid 吗？

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

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

【讨论】：