I'm having trouble ensuring that all the images in my carousel have the same height. Despite trying to use the h-100 class, the heights still vary. Changing the content within the p tags also affects the size of the images. Here's a snapshot: the left column features an owl-carousel, while the right column displays an advertisement.
My goal is to make sure that both columns have equal heights.
https://i.sstatic.net/cYsYX.jpg
If you have any tips or solutions to achieve this, I'd greatly appreciate it. Thanks!
Here's a snippet of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425f425c410d001c040d5f">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
</head>
<body class="bg-primary">
<section class="pt-5">
<div class="container">
<div class="row">
<div class="col-lg-9 mb-3">
<h2 class="mb-5 text-dark">Our Products</h2>
<div class="owl-carousel new-product">
<div class="me-1 ms-1 d-flex align-items-stretch">
<div class="card w-100 h-100">
<div class="card-body d-flex flex-column">
<a href="#" class="text-dark h2 text-decoration-none mb-4">Underground House</a>
<div class="float-start">
<span class="badge bg-success p-3"></span>
</div>
<img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-22.jpg" alt="" height="125">
<div class="small text-center mt-5">
<span>A bunker is meant to be a shelter from bombs or other disasters, but an underground house is intended as a permanent dwelling. </span>
</div>
</div>
</div>
</div>>
<!-- more card elements -->
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="card">
<img src="https://www.buildofy.com/blog/content/images/size/w2000/2022/06/_DSC9610-Edited_-min.jpg" class="img-fluid" height="100" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a071a04195558445c5507">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.new-product').owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
autoplayTimeout: 2000,
items: 2,
nav: true,
responsive: {
0: {
items: 1,
dots: false,
},
485: {
items: 2,
dots: false,
},
728: {
items: 3,
dots: false,
},
960: {
items: 4,
dots: false,
},
1200: {
items: 4,
dots: true,
}
}
});
</script>
</body>
</html>