I am trying my best to explain the situation. Currently, I am utilizing bootstrap for a project where I have two columns - one containing an image on the left and the other with a title and description on the right. My goal is to make the photo fill the entire available area of the column and dynamically increase its height as more text is added, similar to a cover illustration. Any help or suggestions would be greatly appreciated. Thank you.
So far, I attempted to set the height of the image in CSS, but this resulted in a static value which defeats the purpose of having it dynamic. Here's how it looks currently: example
<div id="audi" class="row mt-4">
<!-- Space for carousel -->
<div class="col-md-9 addpadding">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="car.jpg" alt="Audi - Photo 1" class="img-fluid custom-carousel-image">
</div>
<div class="carousel-item">
<img src="car1.jpg" alt="Audi - Photo 2" class="img-fluid custom-carousel-image">
</div>
<div class="carousel-item">
<img src="car2.jpg" alt="Audi - Photo 3" class="img-fluid custom-carousel-image">
</div>
</div>
<!-- Navigation arrows -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Area for title and description on the right side -->
<div class="col-md-3">
<div class="d-flex flex-column justify-content-center h-100">
<h2 class="pb-1 car-title">Audi</h2>
<!-- Pill Badges in one line with center alignment -->
<div class="align-items-center mb-1 mt-1">
<span class="badge badge-pill badge-ultra mr-1"><i class="fa-regular fa-calendar"></i> 2022</span>
<span class="badge badge-pill badge-ultra mr-1"><i class="fa-solid fa-fire-flame-simple"></i> 310 HP</span>
<span class="badge badge-pill badge-ultra mr-1"><i class="fa-solid fa-shuffle"></i> Automatic</span>
<span class="badge badge-pill badge-ultra"><i class="fa-solid fa-gas-pump"></i> Gasoline</span>
</div>
<p class="car-description mt-1">description.</p>
<!-- Button "Learn More" -->
<a href="#" class="btn-learn-more mt-1">Check</a>
<div class="mt-3">
<h2 class="rent-info">Terms</h2>
<ul class="rent-info-list">
<li><i class="fa-regular fa-circle-check"></i>1.</li>
<li><i class="fa-regular fa-circle-check"></i>2.</li>
<li><i class="fa-regular fa-circle-check"></i>3</li>
<li><i class="fa-regular fa-circle-check"></i>4.</li>
</ul>
</div>
<div class="mt-2">
<h2 class="priceHeader">Price List</h2>
<ul class="price-list">
<li><strong>Day:</strong>1 zł</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
}