Adapting carousel size inside a modal using Bootstrap - html

Question

I am currently creating my now website and I want to have a modal containing text an images. The images are stored in a carousel.
Everything works pretty well except for the image sizing.
In store in my database images with different sizes and orientation.
When I click on an image it opens a modal and displays information about the image and the image itself. However not every images fit the modal, some of them are distorted.
I don't get how am I supposed to solve the problem, should I add CSS to the modal? To the carousel?
I think the best way should be to reduce the size of the image if it cannot fit the modal.
here is my code:
<div class="modal fade" id="modal-<?php echo $id; ?>" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="modal-title" id="modalLabel"><?php echo $title; ?></h5>
<div class="mt-5">
<p><?php echo $technique; ?></p>
<p><?php echo $size; ?></p>
<p><?php echo $date; ?> </p>
<p><?php echo $location; ?></p>
</div>
</div>
<div class="col-md-8">
<div class="carousel slide" id="imageCarousel-<?php echo $id ?>"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="1"
data-target="#imageCarousel-<?php echo $id ?>"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="<?php echo $url ?>"
alt="image slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Inquire</button>
</div>
</div>
</div>
</div>
On the screenshot below, the picture should be stretched more vertically.

Answer 1

Try add to the class carousel slide the following CSS style:
vertical-align: middle;

Answer 2

I find the answer thanks to another stack overflow post by adding :
.w-100 {
width: 100% !important;
height: 100%;
}
to my CSS stylesheet :)