I am struggling with aligning the heights of three images in the same row while preserving their aspect ratio. I attempted to use 'display: flex;' for the parent container (.carousel-content-container) and assign 'flex' property based on the image's aspect ratio, but it seems to conflict with Bootstrap columns. Do you have any suggestions that could solve this issue without resorting to a hacky solution?
Any assistance on this matter would be greatly appreciated! Check out the problem by following the link below.
HTML (Carousel section):
<section class="portfolio-section">
<div id="carouselExampleControls" class="carousel slide" data-interval="false" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<div class="row">
<div class="col-lg-5 col-md-5 carousel-content-container">
<img src="./imgs/art/the_beach.png" alt="beach img">
</div>
<div class="col-lg-4 col-md-4 carousel-content-container">
<img src="./imgs/art/joyce3.jpg" alt="joyce img">
</div>
<div class="col-lg-3 col-md-3 carousel-content-container">
<img src="./imgs/art/flower.jpeg" alt="flower img">
</div>
</div>
</div>
... OTHER CAROUSEL ITEMS
... CAROUSEL PREVIOUS AND NEXT SLIDE BUTTONS
</section>
CSS:
.portfolio-section .container-fluid {
background-color: #342b38;
padding: 7% 5%;
color: white;
text-align: center;
}
.portfolio-section .carousel-content-container img {
width: 100%;
padding: 0;
box-shadow: 5px 5px 5px 0px #1f1921;
}
.portfolio-section .carousel-inner{
height: 20%;
}
.portfolio-section .row {
border: 1px solid blue;
}
.portfolio-section .col-lg-5, .col-lg-4, .col-lg-3 {
border: 1px solid red;
}