Adapting carousel size inside a modal using Bootstrap

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.