如何将轮播中的图像调整为相同大小并具有响应能力?

时间:2018-12-30 16:42:15

标签: html css bootstrap-4

我希望轮播中的图像具有相同的尺寸,并且能够响应台式机和移动设备。

这是轮播代码:

<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->img }}" id="hottest-img"  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>

有什么想法吗?

0 个答案:

没有答案