I'm trying to explain it as best I can. I'm using bootstrap. I have two columns, one on the left is a image and the other on the right is a title and description. I need to make the photo fill the entire available area of the column and automatically increase its height when adding more text. Something like a cover. Thanks
I tried to add the height of the image in CSS, but then it has one constant value and it is supposed to be dynamic.how it look like now
<div id="audi" class="row mt-4">
<!-- Miejsce na karuzelę -->
<div class="col-md-9 addpadding">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Wskaźniki (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>
<!-- Slajdy karuzeli -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="car.jpg" alt="Audi - Zdjęcie 1" class="img-fluid custom-carousel-image">
</div>
<div class="carousel-item">
<img src="car1.jpg" alt="Audi - Zdjęcie 2" class="img-fluid custom-carousel-image">
</div>
<div class="carousel-item">
<img src="car2.jpg" alt="Audi - Zdjęcie 3" class="img-fluid custom-carousel-image">
</div>
</div>
<!-- Strzałki nawigacyjne -->
<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">Poprzedni</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">Następny</span>
</a>
</div>
</div>
<!-- Miejsce na tytuł i opis po prawej stronie -->
<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 w jednej linii z wyśrodkowaniem -->
<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 KM</span>
<span class="badge badge-pill badge-ultra mr-1"><i class="fa-solid fa-shuffle"></i> Automatyczna</span>
<span class="badge badge-pill badge-ultra"><i class="fa-solid fa-gas-pump"></i> Benzyna</span>
</div>
<p class="car-description mt-1">opis.</p>
<!-- Przycisk "Dowiedz się więcej" -->
<a href="#" class="btn-learn-more mt-1">Sprawdź</a>
<div class="mt-3">
<h2 class="rent-info">Warunki</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">Cennik</h2>
<ul class="price-list">
<li><strong>Doba:</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;
}
Put height: 100%
on the parent container of your <img>
's and object-fit: cover;
+ max-height: 100%
on the <img>
's.