晚上好！
我编写了以下代码，它完美无缺。但是使用我使用的不同分辨率的图像会使卡片图像的大小不同。有没有办法让所有图像缩放到相同的大小？
此处示例： https://imgur.com/a/PWVQH
我的代码使用的是Bootstrap 4 CDN。
<section>
<div class="container">
<div class="card-group">
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/truck image.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="assets/images/sprintervan.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
任何帮助都会很棒！
谢谢。
答案 0 :(得分：0)
从您的示例来看，您看起来有高度问题。
Bootstrap中的图像通过.img-fluid响应。最大宽度：100％;和身高：汽车;应用于图像，以便它与父元素一起缩放。
建议的解决方法是将 .h-100 （高度100％）添加到每个流体img卡的父节点
<div class="h-100">
<img class="card-img-top img-fluid" src="assets/images/removals.jpg" alt="Card image cap">
</div>