For a website, I have users uploading images which will be displayed in a carousel.

<div class="row">
<div class="col-md-6">
    <div class="justify-content-center my-2 profile-pic w-100">
        <!--Carousel Wrapper-->
        <div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
            ...
        </div>
        <!--/.Carousel Wrapper-->

    </div>
</div>
<div class="col-md-6">
    <div class="card border-primary my-2">
        <h5 class="card-header bg-primary">Information</h5>
        <div class="card-body">
            <div class="card-text">
                ...
            </div>
        </div>
    </div>
</div>

However, even though I am forcing the column with the images to a fixed height via CSS, the carousel images expand beyond the cell.

.profile-pic {
    height: 600px;
    border: solid 1px red;
}
.profile-pic img {
    max-width: 100%;
    max-height: 100%;
}

How can I still keep the images responsive but fit within the confines of the column?