css 如何调整Bootstrap 5卡的大小,以响应不同大小的图像?

w1jd8yoj  于 2022-11-26  发布在  Bootstrap
关注(0)|答案(1)|浏览(154)

我有四个不同大小的图片,放在一排的4张卡片中。所有的图片都有不同的高度,卡片看起来不整齐。我想知道是否有任何方法可以解决这个问题,因为我希望它是有React的。我已经在下面添加了这个代码。

<meta name="viewport" content="width=device-width, initial-scale=1">

我只使用了基本的Bootstrap 5卡模板没有任何css现在。图像看起来如下。

这就是我提到的代码。

<div class="carousel-item active">
                <img src="images/english.jpg" class="d-block w-100"
                    style="width: 100%; max-height: 400px; height: auto;" alt="english">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Best English class ever</h5>
                    <p>Won't regret to join this class</p>
                </div>
            </div>

我想使卡整齐(即所有图像有相同的高度)的响应。我可以做到任何一个只有现在。

tez616oj

tez616oj1#

你可以尝试focuspoint,给予一个图像默认高度,并设置图像的位置。
https://github.com/jonom/jquery-focuspoint

相关问题