I'm attempting to resize some images to fit into horizontal cards created with Bootstrap-5, but I'm having trouble filling up the div completely. I've been using a main.scss file to manage the Bootstrap CSS and have tried using classes like 'img-fluid' and 'img-responsive' (which haven't worked).
My testing is based on a card template extracted from Bootstrap. https://getbootstrap.com/docs/5.2/components/card/#horizontal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="card" style="width: 18rem;">
<img src="../modulos/post.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="container">
<div class="card mb-3 border-light publication-card" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-5">
<img src="./img/post3.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-7">
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card text-bg-dark">
<img src="../modulos/post3.jpg" class="card-img" alt="...">
<div class="card-img-overlay">
<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>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</body>
</html>
For the .img-fluid class, I have tried various approaches to make the image fill up the div but without success. In the vertical card, the image fits perfectly, and I've also experimented with different image formats like 4:3 or square, but capturing the responsive nature of the website has been challenging.