Hey there!
I've come across an issue with my code that was initially working perfectly. The images I'm using have different resolutions, causing the card images to display in various sizes. Is there a way to implement image scaling to ensure all images appear uniform in size?
For reference, here's an example link: https://i.sstatic.net/z1mtb.jpg
The code I'm working with utilizes 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>
Any suggestions or solutions are greatly appreciated!
Thank you for your help.